为未经授权的页面反应路由器配置

Question

我的路由器配置有多个路由和子路由。如果用户未经授权，我需要将他从除一个页面之外的所有页面重定向到授权页面。我的基本配置是这样的

</Route>
  <Route path = "auth" handler = {Auth}/>
  <Route handler = {App}>
    <Route handler = {Container}>
      <Route path = "page1" handler = {Page1}/>
      <Route path = "page2" handler = {Page2}/>
      <Route path = "page3" handler = {Page3}/>
    </Route>
   </Route>
</Route>

如果用户未经授权，我需要将用户重定向到 /auth，但我需要让用户访问 page2

Answer 1

为您的路线采用 auth-flow 解决方案：

在你的应用程序的某个地方，无论是 redux 状态还是全局变量或 API 单例，你都会有一个值指示用户是否被授权，这就是 auth 指的是在这个例子中。为需要身份验证的路由定义 onEnter 处理程序：

function requireAuth(nextState, replace) {
  if (!auth.loggedIn()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

然后在需要检查的路线上使用

<Route>
  <Route path = "auth" handler = {Auth}/>
  <Route handler = {App}>
    <Route handler = {Container}>
      <Route path = "page1" handler = {Page1}/>
      <Route path = "page2" handler = {Page2}/>
      <Route path = "page3" handler = {Page3} onEnter = { requireAuth } />
    </Route>
   </Route>
</Route>

为未经授权的页面反应路由器配置

React router configuration for unauthorised pages

reactjs

react-router