Инициировать маршруты для реагирования маршрутизатора на основе ответа ajax

Question

В моем приложении у меня есть privelege для страницы администратора и после входа в систему я хочу предоставить доступ к этой странице только для пользователей, у которых есть этот privelege.

Можно ли каким-либо образом загружать маршруты для компонента с помощью ajax перед приложением? Есть ли способ изменить маршруты для компонента после некоторых действий (например, логин)? Какова наилучшая практика для решения этой проблемы?

Answer 1

Существует example в 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/

Как всегда клиент не будет доверять, и эти данные должны быть закреплены на сервере.