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 (
+
+ )
+}
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