我正在使用redux-persist跟踪用户令牌,并使用PrivateRoutes允许访问主仪表板。 persist:polls与JWT令牌一起存储在本地存储中。如果我只单击标记为一切正常的路由,但是一旦单击非私有的“隐私策略”之类的东西,我的本地存储就会继续:轮询已重置。
我不确定这是否是PrivateRoute,redux-persist或其他所有问题?这是我的store.js文件:
import storage from 'redux-persist/es/storage'
import {applyMiddleware, compose, createStore} from 'redux'
import {createFilter} from 'redux-persist-transform-filter';
import {persistReducer, persistStore} from 'redux-persist'
import {routerMiddleware} from 'react-router-redux'
import thunk from 'redux-thunk';
import apiMiddleware from './middleware';
import rootReducer from './reducers'
// This is helpful: https://github.com/edy/redux-persist-transform-filter
export default (history) => {
const persistedFilter = createFilter(
'auth', ['access', 'refresh', 'username']
);
const reducer = persistReducer(
{
key: 'polls',
storage: storage,
whitelist: ['auth'],
transforms: [persistedFilter]
},
rootReducer
);
// This is used for setup here: https://github.com/zalmoxisus/redux-devtools-extension#usage
// This was copied from ds-rebuild folder.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// Add thunk to handle error: "Error: Actions must be plain objects. Use custom middleware for async actions."
const store = createStore(
reducer,
{},
composeEnhancers(applyMiddleware(apiMiddleware, thunk, routerMiddleware(history)))
);
persistStore(store);
return store
}
这是我的PrivateRoute
import React from 'react'
import { Route, Redirect } from 'react-router'
import { connect } from 'react-redux'
import * as reducers from '../reducers'
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
<Route {...rest} render={props => (
isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
);
const mapStateToProps = (state) => ({
isAuthenticated: reducers.isAuthenticated(state)
});
export default connect(mapStateToProps, null)(PrivateRoute);
最后,这是我的主要App路由器
function LandingApp() {
return (
<ConnectedRouter history={history}>
<Switch>
<PrivateRoute exact path="/(app|profile)" component={App}/>
<Route exact path="/" component={Theme1}/>
<Route exact path="/login" component={Login1}/>
<Route exact path="/signup" component={SignUp1}/>
<Route exact path="/privacy" component={Privacy}/>
<Route exact path="/tos" component={Terms}/>
<Route component={NotFound}/>
</Switch>
</ConnectedRouter>
)
}
export default LandingApp;
答案 0 :(得分:0)
我不得不将路由器包装在PersistGate中
ReactDOM.render(
<Provider store={store}>
<PersistGate persistor={persistStore(store)}>
<LandingApp/>
</PersistGate>
</Provider>, document.getElementById('root'));