实现未登录跳转

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-redux": "^8.0.5",
"react-router-dom": "^6.6.0", "react-router-dom": "^6.6.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"redux-persist": "^6.0.0",
"typescript": "^4.9.4", "typescript": "^4.9.4",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
} }
@ -14178,6 +14179,14 @@
"@babel/runtime": "^7.9.2" "@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": { "node_modules/redux-thunk": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz", "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz",
@ -27405,6 +27414,12 @@
"@babel/runtime": "^7.9.2" "@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": { "redux-thunk": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz", "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-redux": "^8.0.5",
"react-router-dom": "^6.6.0", "react-router-dom": "^6.6.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"redux-persist": "^6.0.0",
"typescript": "^4.9.4", "typescript": "^4.9.4",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

View File

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

View File

@ -1,5 +1,3 @@
import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
export interface Token { export interface Token {
accessToken: string; accessToken: string;
refreshToken: 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 {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({ const tokenSlice = createSlice({
reducer: { name: 'token',
// token: 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 AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>; export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction< export type AppThunk<ReturnType = void> = ThunkAction<ReturnType,
ReturnType,
RootState, RootState,
unknown, unknown,
Action<string> Action<string>>;
>;

View File

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

View File

@ -6,15 +6,21 @@ import loginImg from '../../assets/login.png'
import axios from "axios"; import axios from "axios";
import {baseUrl} from "../../utils/axiosInstance"; import {baseUrl} from "../../utils/axiosInstance";
import {useNavigate} from "react-router-dom"; import {useNavigate} from "react-router-dom";
import {useAppDispatch} from "../../models/hooks";
import {setToken} from "../../models/store";
function LoginView() { function LoginView() {
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useAppDispatch();
const onFinish = (values: any) => { const onFinish = (values: any) => {
console.log(values) console.log(values)
axios.post(baseUrl + 'login', values).then(function (response) { axios.post(baseUrl + 'login', values).then(function (response) {
console.log(response.data) console.log(response.data)
dispatch(setToken({
accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken
}))
//models.commit('setStaff', response.data.data) //models.commit('setStaff', response.data.data)
navigate('/') navigate('/')
}).catch(function (error) { }).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 LoginView from "../pages/Login/LoginView";
import HomeView from "../pages/HomeView"; import HomeView from "../pages/HomeView";
@ -12,4 +12,5 @@ const router = createBrowserRouter([
element: <HomeView/>, element: <HomeView/>,
}, },
]); ]);
export default router export default router