检查是否已登录 - React Router App ES6 [英] Check if Logged in - React Router App ES6

问题描述

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

I am writing a React.js application (v15.3) using react-router (v2.8.1) and ES6 syntax. I cannot get the router code to intercept all transitions between pages to check if the user needs to login first.

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

My top level render method is very simple (the app is trivial as well):

 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(从未被调用)的各种尝试都失败了.

All the samples on the web use ES5 code or older versions of react-router (older than version 2), and my various attempts with mixins (deprecated) and willTransitionTo (never gets called) have failed.

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

How can I set up a global 'interceptor function' to force users to authenticate before landing on the page they request?

推荐答案

这个版本的 onEnter 回调终于适用于 react-router (v2.8):

This version of the onEnter callback finally worked for react-router (v2.8):

 requireAuth(nextState,
               replace)
   {
      if(!this.authenticated()) // pseudocode - SYNCHRONOUS function (cannot be async without extra callback parameter to this function)
         replace('/login')
   }

解释 V1 与 v2 之间 react-router 重定向差异的链接是 此处.相关部分引用如下:

The link which explains react-router redirection differences between V1 vs v2 is here. Relevant section quoted below:

Likewise, redirecting from an onEnter hook now also uses a location descriptor.

// v1.0.x
(nextState, replaceState) => replaceState(null, '/foo')
(nextState, replaceState) => replaceState(null, '/foo', { the: 'query' })

// v2.0.0
(nextState, replace) => replace('/foo')
(nextState, replace) => replace({ pathname: '/foo', query: { the: 'query' } })

完整代码清单如下(反应路由器版本 2.8.1):

requireAuth(nextState,
               replace)
{
   if(!this.authenticated()) // pseudocode - SYNCHRONOUS function (cannot be async without extra callback parameter to this function)
     replace('/login');
}

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

这篇关于检查是否已登录 - React Router App ES6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！