实现未登录跳转

package-lock.json

@@ -23,6 +23,7 @@
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.6.0",
         "react-scripts": "5.0.1",
+        "redux-persist": "^6.0.0",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4"
       }
@@ -14178,6 +14179,14 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
     "node_modules/redux-thunk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz",
@@ -27405,6 +27414,12 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "requires": {}
+    },
     "redux-thunk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.0",
     "react-scripts": "5.0.1",
+    "redux-persist": "^6.0.0",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
   },

src/index.tsx

@@ -3,16 +3,22 @@ import ReactDOM from 'react-dom/client';
 import 'antd/dist/reset.css';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
+import {Provider} from 'react-redux';
+import {store, persistor} from './models/store';
 import {RouterProvider} from "react-router-dom";
 import router from "./router/router";
-
+import {PersistGate} from 'redux-persist/integration/react'
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 root.render(
     <React.StrictMode>
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
                 <RouterProvider router={router}/>
+            </PersistGate>
+        </Provider>
     </React.StrictMode>
 );
 

src/models/Staff.ts

@@ -1,5 +1,3 @@
-import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
-
 export interface Token {
     accessToken: string;
     refreshToken: string;

src/models/store.ts

@@ -1,17 +1,45 @@
-import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import {configureStore, ThunkAction, Action, PayloadAction, createSlice, combineReducers} from '@reduxjs/toolkit';
 import {Token} from "./Staff"
+import {persistStore, persistReducer} from 'redux-persist'
+import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
+
+const tokenSlice = createSlice({
+    name: 'token',
+    initialState: {
+        accessToken: '',
+        refreshToken: '',
+    },
+    reducers: {
+        setToken: (state, action: PayloadAction<Token>) => {
+            state.accessToken = action.payload.accessToken
+            state.refreshToken = action.payload.refreshToken
+        },
+    },
+});
+export const {setToken} = tokenSlice.actions;
+export const getToken = (state: RootState) => state.token;
+
+const persistConfig = {
+    key: 'root',
+    storage,
+}
+
+const persistedReducer = persistReducer(persistConfig, tokenSlice.reducer)
 
 export const store = configureStore({
     reducer:  {
-       // token: Token,
+        token: persistedReducer
+    },
+    middleware: getDefaultMiddleware => {
+        return getDefaultMiddleware({
+            serializableCheck: false
+        });
     },
 });
-
+export const persistor = persistStore(store)
 export type AppDispatch = typeof store.dispatch;
 export type RootState = ReturnType<typeof store.getState>;
-export type AppThunk<ReturnType = void> = ThunkAction<
-    ReturnType,
+export type AppThunk<ReturnType = void> = ThunkAction<ReturnType,
     RootState,
     unknown,
-    Action<string>
-    >;
+    Action<string>>;

src/pages/HomeView.tsx

@@ -1,10 +1,20 @@
 import React, { FC } from 'react';
 import { Button } from 'antd';
+import {useAppSelector} from "../models/hooks";
+import {getToken, store} from "../models/store";
+import {useNavigate} from "react-router-dom";
 
-const HomeView: FC = () => (
-    <div className="LoginView">
-        <Button type="primary">Home</Button>
+function HomeView() {
+    const token = useAppSelector(getToken);
+    const navigate = useNavigate();
+    console.log( store.getState())
+    if(token.accessToken==='')
+        navigate('/login')
+    return (
+        <div className="HomeView">
+            <p>{token.accessToken}</p>
         </div>
-);
+    )
+}
 
 export default HomeView;

src/pages/Login/LoginView.tsx

@@ -6,15 +6,21 @@ import loginImg from '../../assets/login.png'
 import axios from "axios";
 import {baseUrl} from "../../utils/axiosInstance";
 import {useNavigate} from "react-router-dom";
+import {useAppDispatch} from "../../models/hooks";
+import {setToken} from "../../models/store";
 
 function LoginView() {
     const navigate = useNavigate();
+    const dispatch = useAppDispatch();
 
     const onFinish = (values: any) => {
         console.log(values)
         axios.post(baseUrl + 'login', values).then(function (response) {
             console.log(response.data)
-            
+            dispatch(setToken({
+                accessToken: response.data.accessToken,
+                refreshToken: response.data.refreshToken
+            }))
             //models.commit('setStaff', response.data.data)
             navigate('/')
         }).catch(function (error) {

src/router/router.tsx

@@ -1,4 +1,4 @@
-import {createBrowserRouter} from "react-router-dom";
+import {createBrowserRouter, redirect} from "react-router-dom";
 import LoginView from "../pages/Login/LoginView";
 import HomeView from "../pages/HomeView";
 
@@ -12,4 +12,5 @@ const router = createBrowserRouter([
         element: <HomeView/>,
     },
 ]);
+
 export default router