Question

我想知道前端的身份验证过程（如何以及在何处保存令牌，如何检查用户是否已登录等），当他们尝试访问登录页面时重定向到登录页面必填等。

我不希望这样的实现，只是库可以为我提供帮助，并且在保存令牌之类的东西的情况下，该保存在哪里？

我目前正在学习Redux，但知识不多，我还看了一篇有关Saga的文章，它似乎对于此身份验证过程很有用。

对于后端，我基本上需要安装一些Django扩展，并且我将拥有一些端点，例如：输入用户名/密码并返回访问令牌，使访问令牌过期，注册用户，重设密码等。

现在我知道我需要Redux并使用react-router的Provider和Router。还有关于动作，reduces，store等的基础知识。但是仅此而已。

重要说明：我打算使用钩子代替类组件。

Answer 1

简短说明：

我建议您使用JWT进行身份验证，应将令牌保存在localStorage中

当您登录/注册服务器响应一个jwt令牌时：

localStorage.setItem('usertoken', token)

，然后您应检查用户身份验证：

const isAuth = localStorage.getItem('usertoken')

如果您使用react-router-4：

if (!isAuth) {
  return <Router render={() => <Redirect to="/login" />}
}

// ...your protected routes

每个api请求也应在api.js文件中包含一个jwt-token：

const apiResponse = await fetch(url, {
   ...someOptions,
   headers: { 'x-access-token': localStorage.getItem('usertoken') }
})

如果服务器返回401响应，则应删除令牌：

if (response.status === 401) {
    localStorage.removeItem('usertoken');

    window.location.href = '/login';
}

身份验证使用cookie的另一种方式