Question

在我的应用程序中，我为管理员页面提供了privelege，登录后我想仅为拥有此权限的用户授予对此页面的访问权限。

在应用程序启动之前，是否有任何方法可以使用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 prop是在进入路线之前调用的函数：

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/

与往常一样，客户端不受信任，数据应该在服务器上受到保护。

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

1 个答案: