Я пытаюсь создать маршрут, который был бы доступен только при аутентификации пользователя.Я также хочу иметь возможность автоматически перенаправлять пользователя на страницу входа, когда свойство магазина «isAuthenticated» изменяется на false.
Но я не могу подключить мой обернутый маршрут от маршрутизатора реагирования к хранилищу, чтобы предоставить 'Свойство isAuthenticated 'через реквизит.
![err](https://i.stack.imgur.com/kwB5W.png)
Однако компоненты внутри маршрута можно без проблем подключить к магазину.
ProtectedRoute
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"