Javascript 如何使用承诺和路由呈现受保护的组件

Im使用React路由器版本4.1.2

我可以检查用户是否获得身份验证的唯一方法是通过POST API调用，因为后端仅使用HTTP 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 />
          })
        }} />
    )

---

什么是确保用户经过身份验证的正确方法，然后呈现受保护的组件，或者在用户未经过身份验证时将其重定向到登录页面？

我不知道您使用的是哪一版本的react router，但我记得在2.X版中有一种称为

Oneter

的方法，我想你可以在这些函数中检查auth

所以你的代码可能是这样的

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

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

//单子函数。
onEnter=（下一个状态、替换、完成）=>{
isAuthenticated（）.then（res=>{done（）}）.catch（err=>{replace（'newrouter'）}）
}

对于异步，您看到的错误是您未登录时出现的。对吗？试试这个：

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" />
          }
        }} />
    )

返回(
{
试一试{
const resp=wait isAuthenticated（）
返回
}捕获（e）{
返回
}
}} />
)

使用4.1.2更新了问题

onEnter

在较新版本中不再存在。在我登录时也会发生这种情况。Windows.location不会阻止返回。请检查您的代码，

应以大写字母开头。看起来您的代码使用的是小写字母。2） 如果它仍然不工作，请尝试返回

来测试它。我的代码正在使用

，并且

和

之间没有区别。我的意思是，用

替换

来跟踪问题。除了身份验证功能外，您的代码没有问题。至于你的问题，正确的身份验证方法是什么。。通常在主应用程序的

componentDidMount（）

中完成身份验证。“登录”或“未登录”的状态将保存在状态（或redux）中。这样，您就不必担心路由中的异步调用。对于任何拒绝的人，请投票表决。请留下一个理由。

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

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

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" />
          }
        }} />
    )