配置全局状态管理

src/store/auth.ts

@@ -1,12 +1,11 @@
-import Cookies from "js-cookie";
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { message } from "ant-design-vue";
+import { message, notification } from "ant-design-vue";
 
 import { useUserStore } from "./user";
 import { login, logout as logoutApi } from "@/api/system";
-import { TokenKey as TOKEN_KEY } from "@/utils/auth";
+import { setToken, getToken, removeToken, setAccount, removeAccount } from "@/utils/auth";
 import type { LoginInfo } from "@/api/system/model";
 
 export const useAuthStore = defineStore("auth", () => {
@@ -15,26 +14,29 @@ export const useAuthStore = defineStore("auth", () => {
   const userStore = useUserStore();
 
   const loginLoading = ref(false);
-  const token = ref(Cookies.get(TOKEN_KEY) || null);
+  const token = ref(getToken() || null);
 
-  function setToken(newToken: string) {
+  async function authLogin(params: LoginInfo, rememberMe: boolean) {
-    token.value = newToken;
-    Cookies.set(TOKEN_KEY, newToken);
-  }
-
-  function clearToken() {
-    token.value = null;
-    Cookies.remove(TOKEN_KEY);
-  }
-
-  async function authLogin(params: LoginInfo) {
     try {
       loginLoading.value = true;
       const res = await login(params);
       if (res.code === 200) {
         setToken(res.token as string);
         await userStore.fetchUserInfo();
-        message.success("登录成功");
+        notification.success({
+          message: "登录成功",
+          description: `欢迎回来，${params.username}`,
+          duration: 3,
+        });
+
+        if (rememberMe) {
+          userStore.setUserInfo({
+            ...params,
+            rememberMe
+          });
+        } else {
+          userStore.clearUserInfo();
+        }
         const redirect = route.query.redirect || "/";
         router.replace(redirect as string);
         return res;
@@ -52,7 +54,7 @@ export const useAuthStore = defineStore("auth", () => {
   async function logout() {
     // 在实际应用中，这里可以调用后端的退出登录接口
     await logoutApi();
-    clearToken();
+    removeToken();
     userStore.clearUserInfo();
     await router.push("/login");
     message.success("已成功退出");

src/store/user.ts

@@ -1,22 +1,24 @@
 import { defineStore } from 'pinia';
 import Cookies from 'js-cookie';
+import { setAccount, removeAccount } from "@/utils/auth";
 
-const USERNAME_KEY = 'username';
+export const useUserStore = defineStore("user", {
-
-export const useUserStore = defineStore('user', {
   state: () => ({
-    username: Cookies.get(USERNAME_KEY) || null,
+    username: Cookies.get('username') || null,
   }),
   actions: {
     async fetchUserInfo() {
       // Simulate API call
-      const fetchedUsername = 'mock_user'; 
+    },
-      this.username = fetchedUsername;
+    setUserInfo(params: any) {
-      Cookies.set(USERNAME_KEY, fetchedUsername);
+      setAccount({
+        username: params.username,
+        password: params.password,
+        rememberMe: params.rememberMe ? "true" : "false",
+      });
     },
     clearUserInfo() {
-      this.username = null;
+      removeAccount();
-      Cookies.remove(USERNAME_KEY);
     },
   },
 });