登录/登出优化

components.d.ts

@@ -19,11 +19,13 @@ declare module 'vue' {
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     AProgress: typeof import('ant-design-vue/es')['Progress']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
@@ -47,6 +49,7 @@ declare module 'vue' {
     ILucideRefreshCw: typeof import('~icons/lucide/refresh-cw')['default']
     ILucideRotateCcw: typeof import('~icons/lucide/rotate-ccw')['default']
     ILucideRotateCw: typeof import('~icons/lucide/rotate-cw')['default']
+    ILucideSave: typeof import('~icons/lucide/save')['default']
     ILucideShieldCheck: typeof import('~icons/lucide/shield-check')['default']
     ILucideUser: typeof import('~icons/lucide/user')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/store/auth.ts

@@ -5,7 +5,7 @@ import { message, notification } from "ant-design-vue";
 
 import { useUserStore } from "./user";
 import { login, logout as logoutApi } from "@/api/system";
-import { setToken, getToken, removeToken, setAccount, removeAccount } from "@/utils/auth";
+import { setToken, getToken, removeToken, removeAccount, getRememberMe } from "@/utils/auth";
 import type { LoginInfo } from "@/api/system/model";
 
 export const useAuthStore = defineStore("auth", () => {
@@ -29,19 +29,13 @@ export const useAuthStore = defineStore("auth", () => {
           duration: 3,
         });
 
-        let userInfo = {};
         if (rememberMe) {
-          userInfo = {
+          userStore.setUserInfo({ ...params, rememberMe });
-            ...params,
-            rememberMe
-          };
         } else {
-          userInfo = {
+          userStore.clearUserInfo();
-            username: params.username
+          userStore.setUsername(params.username);
-          };
         }
-        userStore.clearUserInfo();
+
-        userStore.setUserInfo(userInfo);
         const redirect = route.query.redirect || "/";
         router.replace(redirect as string);
         return res;
@@ -60,7 +54,7 @@ export const useAuthStore = defineStore("auth", () => {
     // 在实际应用中，这里可以调用后端的退出登录接口
     await logoutApi();
     removeToken();
-    userStore.clearUserInfo();
+    !getRememberMe() && removeAccount();
     await router.push("/login");
     message.success("已成功退出");
   }

src/store/user.ts

@@ -10,21 +10,29 @@ export const useUserStore = defineStore("user", () => {
     // Simulate API call
   }
 
+  function setUsername(name: string) {
+    username.value = name;
+  }
+
   function setUserInfo(params: any) {
-    setAccount({
+    username.value = params.username || '';
+
+    params.rememberMe && setAccount({
       username: params.username,
       password: params.password,
-      rememberMe: params.rememberMe ? "true" : "false",
+      rememberMe: params.rememberMe,
     });
   }
 
   function clearUserInfo() {
+    username.value = '';
     removeAccount();
   }
 
   return {
     username,
     fetchUserInfo,
+    setUsername,
     setUserInfo,
     clearUserInfo,
   }

src/utils/auth.ts

@@ -24,11 +24,14 @@ export interface AccountInfo {
   rememberMe?: 'true' | 'false';
 }
 
+export function getRememberMe() {
+  return Cookies.get("rememberMe");
+}
+
 export function getAccount() {
   return {
     username: Cookies.get("username"),
     password: Cookies.get("password"),
-    rememberMe: Cookies.get("rememberMe"),
   };
 }
 

src/views/login.vue

@@ -6,7 +6,7 @@ import type { LoginInfo } from '@/api/system/model'
 import type { Rule } from 'ant-design-vue/es/form';
 import { useAuthStore } from '@/store';
 import { storeToRefs } from 'pinia';
-import { getAccount } from '@/utils/auth';
+import { getAccount, getRememberMe } from '@/utils/auth';
 import { decrypt } from '@/utils/jsencrypt';
 
 const authStore = useAuthStore();
@@ -66,7 +66,8 @@ const refreshCaptcha = async () => {
 
 // 初始化
 const initLoginForm = () => {
-  const { username, password, rememberMe: isRememberMe } = getAccount();
+  const { username, password } = getAccount();
+  const isRememberMe = getRememberMe();
   if (isRememberMe && isRememberMe === 'true') {
     rememberMe.value = true;
     formData.username = username || '';