实现未登录跳转

main
wuyize 2022-12-24 11:50:11 +08:00
parent 06d6137e85
commit e3c0fd2659
8 changed files with 84 additions and 19 deletions

15
package-lock.json generated
View File

@ -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",

View File

@ -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"
},

View File

@ -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>
<RouterProvider router={router}/>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<RouterProvider router={router}/>
</PersistGate>
</Provider>
</React.StrictMode>
);

View File

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

View File

@ -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<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: 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>>;

View File

@ -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>
</div>
);
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;

View File

@ -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) {

View File

@ -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