Question

我正在使用React-Router Version 4.1.2

我可以检查用户是否经过身份验证的唯一方法是通过POST API调用，因为后端使用HTTP Only Cookie。

我尝试过以下方法来创建一个受保护的路由，好像它在渲染时返回null。

    return (
      <Route
        key={path}
        path={path}
        exact={exact}
        render={props => {
          return isAuthenticated().then(resp => {
            return <Component {...props} />
          }).catch(err => {
            window.location = '/user/login'
            return <div />
          })
        }} />
    )

同时尝试异步和等待方法，

    return (
      <Route
        key={path}
        path={path}
        exact={exact}
        render={async props => {
          try {
            const resp = await isAuthenticated()
            return <Component {...props} />
          } catch (e) {
            window.location = '/user/login'
            return <div />
          }
        }} />
    )

它产生的错误，

Route.render(): A valid React element (or null) must be returned. 
You may have returned undefined, an array or some other invalid object.

确保用户经过身份验证然后呈现受保护组件的正确方法是什么？如果他/她未经过身份验证，则将用户重定向到登录页面？

Answer 1

我不知道您使用的是哪个版本的react-router，但我记得版本2.X中有一个名为onEnter的方法，我想您可以在这些函数中检查auth。

所以你的代码可能看起来像这样

<Router component={yourComponent} onEnter={onEnter}/>

// onEnter function.
 onEnter = (nextState, replace, done) => {
  isAuthenticated().then(res => {done()}).catch(err => {replace('new router')})
}

Answer 2

对于异步，您看到的错误是您没有登录时。这是正确的吗？试试这个：

return (
      <Route
        key={path}
        path={path}
        exact={exact}
        render={async props => {
          try {
            const resp = await isAuthenticated()

            return <Component {...props} />
          } catch (e) {

            return <Redirect to="/user/login" />
          }
        }} />
    )

如何使用Promise和Route呈现受保护的组件

2 个答案: