您的解决方案不是最佳的，因为您说您没有真正检查用户令牌的有效性。
让我详细说明您如何处理它：
1.在开始时间检查令牌
- 等待组件
redux-persist完成加载和注入Provider
- 将 Login 组件设置为所有其他组件的父级
- 检查令牌是否仍然有效 3.1。是：显示孩子 3.2。否：显示登录表单
2. 当用户当前正在使用应用程序时
您应该利用中间件的力量并检查每个dispatch用户制作的令牌有效性。
如果令牌已过期，则调度操作以使令牌无效。否则，就好像什么都没发生一样继续。
看看token.js下面的中间件。
我写了一个完整的代码示例供您使用并在需要时进行调整。
我在下面提出的解决方案与路由器无关。如果您使用react-router但也可以与任何其他路由器一起使用，则可以使用它。
应用入口点：app.js
看到Login组件在路由器的顶部
import React from 'react';
import { Provider } from 'react-redux';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import createRoutes from './routes'; // Contains the routes
import { initStore, persistReduxStore } from './store';
import { appExample } from './container/reducers';
import Login from './views/login';
const store = initStore(appExample);
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { rehydrated: false };
}
componentWillMount() {
persistReduxStore(store)(() => this.setState({ rehydrated: true }));
}
render() {
const history = syncHistoryWithStore(browserHistory, store);
return (
<Provider store={store}>
<Login>
{createRoutes(history)}
</Login>
</Provider>
);
}
}
商店.js
这里要记住的关键是redux-persist在本地存储（或任何存储）中使用并保留登录减速器。
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import localForage from 'localforage';
import { routerReducer } from 'react-router-redux';
import reducers from './container/reducers';
import middlewares from './middlewares';
const reducer = combineReducers({
...reducers,
routing: routerReducer,
});
export const initStore = (state) => {
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
{},
composeEnhancers(
applyMiddleware(...middlewares),
autoRehydrate(),
),
);
persistStore(store, {
storage: localForage,
whitelist: ['login'],
});
return store;
};
export const persistReduxStore = store => (callback) => {
return persistStore(store, {
storage: localForage,
whitelist: ['login'],
}, callback);
};
中间件：token.js
这是一个要添加的中间件，以检查令牌是否仍然有效。
如果令牌不再有效，则触发调度以使其无效。
import jwtDecode from 'jwt-decode';
import isAfter from 'date-fns/is_after';
import * as actions from '../container/actions';
export default function checkToken({ dispatch, getState }) {
return next => (action) => {
const login = getState().login;
if (!login.isInvalidated) {
const exp = new Date(jwtDecode(login.token).exp * 1000);
if (isAfter(new Date(), exp)) {
setTimeout(() => dispatch(actions.invalidateToken()), 0);
}
}
return next(action);
};
}
登录组件
这里最重要的是测试if (!login.isInvalidated)。
如果登录数据没有失效，则表示用户已连接并且令牌仍然有效。（否则它会因中间件而失效token.js）
import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../../container/actions';
const Login = (props) => {
const {
dispatch,
login,
children,
} = props;
if (!login.isInvalidated) {
return <div>children</div>;
}
return (
<form onSubmit={(event) => {
dispatch(actions.submitLogin(login.values));
event.preventDefault();
}}>
<input
value={login.values.email}
onChange={event => dispatch({ type: 'setLoginValues', values: { email: event.target.value } })}
/>
<input
value={login.values.password}
onChange={event => dispatch({ type: 'setLoginValues', values: { password: event.target.value } })}
/>
<button>Login</button>
</form>
);
};
const mapStateToProps = (reducers) => {
return {
login: reducers.login,
};
};
export default connect(mapStateToProps)(Login);
登录操作
export function submitLogin(values) {
return (dispatch, getState) => {
dispatch({ type: 'readLogin' });
return fetch({}) // !!! Call your API with the login & password !!!
.then((result) => {
dispatch(setToken(result));
setUserToken(result.token);
})
.catch(error => dispatch(addLoginError(error)));
};
}
export function setToken(result) {
return {
type: 'setToken',
...result,
};
}
export function addLoginError(error) {
return {
type: 'addLoginError',
error,
};
}
export function setLoginValues(values) {
return {
type: 'setLoginValues',
values,
};
}
export function setLoginErrors(errors) {
return {
type: 'setLoginErrors',
errors,
};
}
export function invalidateToken() {
return {
type: 'invalidateToken',
};
}
登录减速器
import { combineReducers } from 'redux';
import assign from 'lodash/assign';
import jwtDecode from 'jwt-decode';
export default combineReducers({
isInvalidated,
isFetching,
token,
tokenExpires,
userId,
values,
errors,
});
function isInvalidated(state = true, action) {
switch (action.type) {
case 'readLogin':
case 'invalidateToken':
return true;
case 'setToken':
return false;
default:
return state;
}
}
function isFetching(state = false, action) {
switch (action.type) {
case 'readLogin':
return true;
case 'setToken':
return false;
default:
return state;
}
}
export function values(state = {}, action) {
switch (action.type) {
case 'resetLoginValues':
case 'invalidateToken':
return {};
case 'setLoginValues':
return assign({}, state, action.values);
default:
return state;
}
}
export function token(state = null, action) {
switch (action.type) {
case 'invalidateToken':
return null;
case 'setToken':
return action.token;
default:
return state;
}
}
export function userId(state = null, action) {
switch (action.type) {
case 'invalidateToken':
return null;
case 'setToken': {
const { user_id } = jwtDecode(action.token);
return user_id;
}
default:
return state;
}
}
export function tokenExpires(state = null, action) {
switch (action.type) {
case 'invalidateToken':
return null;
case 'setToken':
return action.expire;
default:
return state;
}
}
export function errors(state = [], action) {
switch (action.type) {
case 'addLoginError':
return [
...state,
action.error,
];
case 'setToken':
return state.length > 0 ? [] : state;
default:
return state;
}
}
随时问我任何问题，或者如果您需要我解释更多有关哲学的信息。