Почему посещение страницы, отличной от <PrivateRoute>, очищает мою проверку подлинности при опросе? - PullRequest
Новая
       8

Почему посещение страницы, отличной от <PrivateRoute>, очищает мою проверку подлинности при опросе?

0 голосов
/ 27 февраля 2020

Я использую redux-persist для отслеживания токена пользователя и PrivateRoutes для доступа к главной панели мониторинга. Persist: опросы хранятся в локальном хранилище с токеном JWT. Если я нажимаю только на маршруты, отмеченные как все работает, как ожидалось, однако, когда я нажимаю на что-то вроде «Политика конфиденциальности», которая не является частной, мое локальное хранилище сохраняется: опросы сбрасываются.

Я не уверен если это проблема с PrivateRoute, redux-persist или чем-то еще полностью? Вот мой магазин. js file: 

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);

Наконец, вот мой основной маршрутизатор приложений 

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;

1 Ответ

0 голосов
/ 04 марта 2020

Мне пришлось обернуть мои маршрутизаторы в PersistGate 

ReactDOM.render(
    <Provider store={store}>
        <PersistGate persistor={persistStore(store)}>
            <LandingApp/>
        </PersistGate>
    </Provider>, document.getElementById('root'));
...