如果有token，就不允许跳转到登录页了

package-lock.json

@@ -4372,6 +4372,7 @@
       "version": "4.5.4",
       "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.4.tgz",
       "integrity": "sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==",
+      "license": "MIT",
       "dependencies": {
         "use-sync-external-store": "1.2.0"
       },

src/App.tsx

@@ -9,9 +9,13 @@ import Cate from './pages/Cate';
 import DefaultLayout from './layout/DefaultLayout';
 import Login from './pages/Login';
 
+import useAuthRedirect from '@/hooks/useAuthRedirect';
+
 import { ConfigProvider } from 'antd';
 
 function App() {
+  useAuthRedirect()
+  
   const [loading, setLoading] = useState<boolean>(true);
   const { pathname } = useLocation();
 

src/hooks/useAuthRedirect.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useUserStore } from '@/stores';
+
+// 如果有token，就跳转到首页
+const useAuthRedirect = () => {
+    const store = useUserStore();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    useEffect(() => {
+        const token = store.token;
+        if (token) navigate('/home');
+    }, [location, navigate]);
+};
+
+export default useAuthRedirect;

src/pages/Login/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useForm } from 'antd/es/form/Form';
 import { Button, Form, Input, notification } from 'antd';
@@ -18,20 +18,31 @@ const LoginForm: React.FC = () => {
         try {
             const values = await form.validateFields();
             const { data } = await loginDataAPI(values);
-            store.token = data.token;
-            store.user = data.user;
+
+            // 将用户信息和token保存起来
+            store.setUser(data.user);
+            store.setToken(data.token);
 
             notification.success({
-                message: 'success',
+                message: 'Success',
                 description: `Hello ${data.user.name} 欢迎回来 🎉`,
             });
 
             navigate(returnUrl);
         } catch (error) {
             console.error('Failed to login:', error);
+
+            notification.error({
+                message: 'Error',
+                description: 'Failed to login. Please try again.',
+            });
         }
     };
 
+    useEffect(()=>{
+
+    },)
+
     return (
         <div className="w-screen h-screen flex justify-center items-center">
             <div className="overflow-hidden relative w-[400px] h-[380px] rounded-lg bg-white shadow-[4px_6px_200px_200px_rgba(121,122,243,0.1)]">

src/stores/modules/user.ts

@@ -1,25 +1,36 @@
-import { create } from 'zustand'
+import { User } from '@/types/user';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 interface UserStore {
   token: string;
+  setToken: (data: string) => void;
   user: User;
-  setData: (data: User) => void;
-  quitLogin: () => void
+  setUser: (data: User) => void;
+  quitLogin: () => void;
 }
 
-export default create<UserStore>((set) => ({
-  token: "",
-  user: {} as User,
-  setData: (data: User) => set(() => ({ user: data })),
-  // 退出登录
-  quitLogin: () => set(() => {
-    localStorage.clear()
-    sessionStorage.clear()
-    location.href = "/login"
-
-    return {
+export default create(
+  persist<UserStore>(
+    (set) => ({
+      token: "",
+      setToken: (token: string) => set(() => ({ token })),
       user: {} as User,
-      token: ""
+      setUser: (data: User) => set(() => ({ user: data })),
+      // 退出登录
+      quitLogin: () => set(() => {
+        localStorage.clear();
+        sessionStorage.clear();
+        location.href = "/login";
+
+        return { user: {} as User, token: "" }
+      })
+    }),
+    {
+      name: 'user_storage',
+      getStorage: () => localStorage,
+      // 定义需要持久化存储的数据，默认表示全部持久化
+      // partialize: (state) => ({ token: state.token, user: state.user }),
     }
-  })
-}))
+  )
+);

src/utils/request.ts

@@ -21,6 +21,8 @@ instance.interceptors.request.use(
     (config: InternalAxiosRequestConfig) => {
         const token = store.token
 
+        if(config.method === "get") return config
+        
         // 如果有token就把赋值给请求头
         if (token) config.headers["Authorization"] = `Bearer ${token}`;