feat(login): 增加记住账号功能

src/utils/auth.ts

@@ -1,44 +1,44 @@
-import { loacl } from './storage';
+import { local } from './storage';
 import { EnumStorageKey } from '@/enum';
 
 const DURATION = 6 * 60 * 60;
 
 /* 获取当前token */
 export function getToken() {
-	return loacl.get(EnumStorageKey.token);
+	return local.get(EnumStorageKey.token);
 }
 /* 设置token */
 export function setToken(data: string) {
-	loacl.set(EnumStorageKey.token, data, DURATION);
+	local.set(EnumStorageKey.token, data, DURATION);
 }
 /* 移除token */
 export function removeToken() {
-	loacl.remove(EnumStorageKey.token);
+	local.remove(EnumStorageKey.token);
 }
 /* 获取当前refreshToken */
 export function getRefreshToken() {
-	return loacl.get(EnumStorageKey.refreshToken);
+	return local.get(EnumStorageKey.refreshToken);
 }
 /* 设置refreshToken */
 export function setRefreshToken(data: string) {
-	loacl.set(EnumStorageKey.refreshToken, data, DURATION);
+	local.set(EnumStorageKey.refreshToken, data, DURATION);
 }
 /* 移除refreshToken */
 export function removeRefreshToken() {
-	loacl.remove(EnumStorageKey.refreshToken);
+	local.remove(EnumStorageKey.refreshToken);
 }
 
 /* 获取用户详情 */
 export function getUserInfo() {
-	return loacl.get(EnumStorageKey.userInfo);
+	return local.get(EnumStorageKey.userInfo);
 }
 /* 设置用户详情 */
 export function setUserInfo(data: any) {
-	loacl.set(EnumStorageKey.userInfo, data);
+	local.set(EnumStorageKey.userInfo, data);
 }
 /* 移除用户详情 */
 export function removeUserInfo() {
-	loacl.remove(EnumStorageKey.userInfo);
+	local.remove(EnumStorageKey.userInfo);
 }
 
 /** 去除用户相关缓存 */

src/utils/storage.ts

@@ -34,7 +34,7 @@ function createLocalStorage() {
 				return value;
 			}
 		}
-		loacl.remove(key);
+		local.remove(key);
 		return null;
 	}
 
@@ -81,5 +81,5 @@ function createSessionStorage() {
 	}
 }
 
-export const loacl = createLocalStorage();
+export const local = createLocalStorage();
 export const session = createSessionStorage();

src/views/login/index.vue

@@ -78,7 +78,9 @@
           :size="24"
         >
           <div class="flex-y-center justify-between">
-            <n-checkbox>记住我</n-checkbox>
+            <n-checkbox v-model:checked="isRemember">
+              记住我
+            </n-checkbox>
             <n-button :text="true">
               忘记密码？
             </n-button>
@@ -107,7 +109,8 @@
 <script setup lang="ts">
 import { FormInst } from 'naive-ui';
 import { useAuthStore } from '@/store';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import { local } from '@/utils';
 
 const authStore = useAuthStore();
 const swiperList = [
@@ -118,10 +121,12 @@ const swiperList = [
 ];
 
 const formValue = ref({
-	account: 'admin',
-	pwd: '123456',
-	code: '1234',
+	account: '',
+	pwd: '',
+	code: '',
 });
+
+const isRemember = ref(false);
 const rules = {
 	account: {
 		required: true,
@@ -142,14 +147,31 @@ const rules = {
 };
 const formRef = ref<FormInst | null>(null);
 
-const handleLogin = () => {
+function handleLogin() {
 	formRef.value?.validate((errors) => {
-		if (errors) return console.error(errors);
+		if (errors) return;
 
 		const { account, pwd } = formValue.value;
+
+		if (isRemember.value) {
+			local.set('login_account', { account, pwd });
+		}
+
 		authStore.login(account, pwd);
 	});
-};
+}
+
+function checkUserAccount() {
+	const loginAccount = local.get('login_account');
+	if (!loginAccount) return;
+
+	formValue.value = loginAccount;
+	isRemember.value = true;
+}
+
+onMounted(() => {
+	checkUserAccount();
+});
 </script>
 
 <style scoped></style>