Question

我正在尝试创建仅在用户通过身份验证时才可访问的路由。我还希望能够在商店的“ isAuthenticated”属性更改为false时自动将用户重定向到登录页面。

但是我无法将我的包装路由从react路由器连接到商店，以通过道具提供“ isAuthenticated”属性。

但是，路线中的组件可以毫无问题地连接到商店。

受保护的路线

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router';

const ProtectedRoute = ({ component: Component, isAuthenticated, ...extraProps }) => (
    <Route {...extraProps} render={(props) => {
        if (isAuthenticated) {
            return <Component {...props} />;
        }

        return <Redirect to='/login' />;
    }} />
);

ProtectedRoute.propTypes = {
    component: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => ({
    isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(ProtectedRoute);

应用程序根

import React, { PureComponent } from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { Switch, Route } from 'react-router';
import { ProtectedRoute } from 'app/jwt-auth';
import { ConnectedRouter } from 'connected-react-router';

import { store, persistor, history } from 'ducks';
import Login from 'routes/login';
import Content from 'routes/Content';

export default class App extends PureComponent {
    render () {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <ConnectedRouter history={history}>
                        <Switch>
                            <Route path="/login" component={Login} />
                            <ProtectedRoute path="/" component={Content} />
                        </Switch>
                    </ConnectedRouter>
                </PersistGate>
            </Provider>
        );
    }
}

商店

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { createBrowserHistory } from 'history';
import { routerMiddleware, connectRouter } from 'connected-react-router';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { createFilter, autoMergeLevel2 } from 'redux-persist-transform-filter';

import promiseMiddleware from 'redux-promise-middleware';
import thunkMiddleware from 'redux-thunk';

import { jwtAuthReducer } from 'app/jwt-auth';

export const history = createBrowserHistory();

const rootReducer = combineReducers({
    router: connectRouter(history),
    auth: jwtAuthReducer
});

const authPersistanceFilter = createFilter(
    'auth', ['access', 'refresh', 'status']
);

const persistentStorageConfig = {
    key: 'root',
    storage,
    stateReconciler: autoMergeLevel2,
    whitelist: ['auth'],
    transforms: [authPersistanceFilter]
};

const persistentRootReducer = persistReducer(
    persistentStorageConfig,
    rootReducer
);

const middlewares = applyMiddleware(
    routerMiddleware(history),
    promiseMiddleware,
    thunkMiddleware
);

export const store = createStore(
    persistentRootReducer,
    compose(
        middlewares,
        window.devToolsExtension ? window.window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
    )
);

export const persistor = persistStore(store);

打包版本

"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^6.0.1",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
"connected-react-router": "^6.3.2"

无法将<route>与Redux存储连接

0 个答案: