实现未登录跳转
parent
06d6137e85
commit
e3c0fd2659
|
@ -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",
|
||||||
|
|
|
@ -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"
|
||||||
},
|
},
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>>;
|
||||||
>;
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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
|
Loading…
Reference in New Issue