基于ajax响应的初始路由反应路由器

Question

在我的应用程序中，我拥有管理页面和登录后的权限，我只想为拥有此权限的用户授予对此页面的访问权限。

有什么方法可以在应用程序被引用之前为组件加载路由并使用ajax？ 有什么方法可以在某些操作（如登录）后更改组件的路由？ 解决此问题的最佳做法是什么？

Answer 1

react-router回购中有example。他们使用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/

一如往常的客户端不被信任和数据应该固定在服务器上。