对未经授权的页面进行路由器配置

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>