diff --git a/package-lock.json b/package-lock.json index 97cd753..4be9f60 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 66a8812..46812eb 100644 --- a/package.json +++ b/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" }, diff --git a/src/index.tsx b/src/index.tsx index a492979..eb3f37a 100644 --- a/src/index.tsx +++ b/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( - + + + + + ); diff --git a/src/models/Staff.ts b/src/models/Staff.ts index 6772b97..25ddc02 100644 --- a/src/models/Staff.ts +++ b/src/models/Staff.ts @@ -1,5 +1,3 @@ -import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'; - export interface Token { accessToken: string; refreshToken: string; diff --git a/src/models/store.ts b/src/models/store.ts index 501ecf0..054c5ba 100644 --- a/src/models/store.ts +++ b/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 -export const store = configureStore({ - reducer: { - // token: Token, +const tokenSlice = createSlice({ + name: 'token', + initialState: { + accessToken: '', + refreshToken: '', + }, + reducers: { + setToken: (state, action: PayloadAction) => { + 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: persistedReducer + }, + middleware: getDefaultMiddleware => { + return getDefaultMiddleware({ + serializableCheck: false + }); + }, +}); +export const persistor = persistStore(store) export type AppDispatch = typeof store.dispatch; export type RootState = ReturnType; -export type AppThunk = ThunkAction< - ReturnType, +export type AppThunk = ThunkAction - >; + Action>; diff --git a/src/pages/HomeView.tsx b/src/pages/HomeView.tsx index b5e2178..0af5ef1 100644 --- a/src/pages/HomeView.tsx +++ b/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 = () => ( -
- -
-); +function HomeView() { + const token = useAppSelector(getToken); + const navigate = useNavigate(); + console.log( store.getState()) + if(token.accessToken==='') + navigate('/login') + return ( +
+

{token.accessToken}

+
+ ) +} export default HomeView; diff --git a/src/pages/Login/LoginView.tsx b/src/pages/Login/LoginView.tsx index 59eafca..9623fcb 100644 --- a/src/pages/Login/LoginView.tsx +++ b/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) { diff --git a/src/router/router.tsx b/src/router/router.tsx index 28c55a3..de1ae3e 100644 --- a/src/router/router.tsx +++ b/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: , }, ]); + export default router \ No newline at end of file