Question

在我的React Web应用程序中，登录注销功能是使用context-API和挂钩实现的。一切似乎都正常，除了必须两次单击“登录”按钮才能将用户推送到仪表板。

return <Redirect to="/dashboard />语句不起作用，相反，我必须使用history.push('/dashboard')，这对我来说似乎不是登录时更好的选择。

这是工作片段： https://codesandbox.io/s/wizardly-worker-mqkex?file=/src/AuthContext.js

此外，我需要一些最佳实践建议，以获取其他组件中已记录的用户详细信息。使用localstorage或全局上下文API状态，哪个是相同的最佳选择？

任何帮助解决此问题的方法，谢谢：）

Answer 1

好吧，归结为一个简单的事实，即您进行检查时不会更新您的上下文。最简单的解决方案是删除isLoggedIn的支票并将用户推送到仪表板：

  const postLogin = async (e) => {
    e.preventDefault()
    try {
      await login()

      props.history.push('/dashboard')
    } catch (error) {
      dispatch({
        type: 'LOGIN_FAILURE',
        payload: 'Unable to login'
      })
    }
  }

然后当您没有得到 200 时，在login函数中引发错误：

const login = async () => {
    const loginUser = { status: 200, id: '3654634565659abhdgh' }

    if (loginUser.status === 200) {
      dispatch({
        type: 'LOGIN_SUCCESS',
        payload: loginUser.id
      })
    } else {
      throw new Error("Invalid Credentials")
    }
  }

由于您的登录代码位于try catch块中，因此登录失败时用户不会被推送到仪表板。

使用上下文API和私有路由来响应登录

1 个答案: