javascript - 检查是否登录 - React Router App ES6

Question

我正在使用 react-router (v2.8.1) 和 ES6 语法 编写一个 React.js 应用程序 (v15.3)。我无法获取路由器代码来拦截页面之间的所有转换以检查用户是否需要先登录。

我的顶级渲染方法非常简单(应用程序也很简单):

 render()
   {
      return (
         <Router history={hashHistory}>
            <Route path="/" component={AppMain}>
               <Route path="login" component={Login}/>
               <Route path="logout" component={Logout}/>
               <Route path="subject" component={SubjectPanel}/>
               <Route path="all" component={NotesPanel}/>
            </Route>
         </Router>
      );
   }

网络上的所有示例都使用 ES5 代码或旧版本的 react-router(早于版本 2)，我对 mixins(已弃用)和 willTransitionTo(从未被调用)的各种尝试都失败了。

如何设置全局“拦截器功能”以强制用户在登陆他们请求的页面之前进行身份验证？

Answer 1

每个路由都有一个 onEnter 钩子(Hook)，它在路由转换发生之前被调用。使用自定义 requireAuth 函数处理 onEnter Hook 。

<Route path="/search" component={Search} onEnter={requireAuth} />

示例 requireAuth 如下所示。如果用户通过身份验证，则通过 next() 进行转换。否则将路径名替换为/login 并通过 next() 进行转换。登录也会传递当前路径名，以便在登录完成后，用户将被重定向到最初请求的路径。

function requireAuth(nextState, replace, next) {
  if (!authenticated) {
    replace({
      pathname: "/login",
      state: {nextPathname: nextState.location.pathname}
    });
  }
  next();
}