В моем приложении у меня есть привилегия для страницы администратора, и после входа в систему я хочу предоставить доступ к этой странице только пользователям, у которых есть эта привилегия.
Есть ли способ загрузить маршруты для компонента с помощью ajax до запуска приложения? Есть ли способ изменить маршруты для компонента после некоторых действий (например, входа в систему)? Какова наилучшая практика для решения этой проблемы?
Существует пример в react-router репо. Они используют свойство onEnter для проверки авторизации:
<Router history={withExampleBasename(browserHistory, __dirname)}>
<Route path="/" component={App}>
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route path="about" component={About} />
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
</Route>
</Router>
Свойство onEnter функция, которая вызывается перед входом в маршрут:
function requireAuth(nextState, replace) {
if (!auth.loggedIn()) {
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname }
})
}
}
Функция onEnter имеет следующую сигнатуру вызова:
onEnter(nextState, replace, callback?)
Это дает вам доступ к состоянию, чтобы проверить, есть ли у пользователя права администратора.
Другой часто обсуждаемый подход заключается в использовании компонентов более высокого порядка. Компоненты, которым требуются права администратора, не должны знать об этом, но обёрнуты компонентом, который ограничивает доступ.
Еще немного информации:
https://blog.tighten.co/react-101-routing-and-auth
https://github.com/joshgeller/react-redux-jwt-auth-example
https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/
Как всегда, клиенту нельзя доверять, а данные должны быть защищены на сервере.
