我想知道前端的身份验证过程(如何以及在何处保存令牌,如何检查用户是否已登录等),当他们尝试访问登录页面时重定向到登录页面必填等。
我不希望这样的实现,只是库可以为我提供帮助,并且在保存令牌之类的东西的情况下,该保存在哪里?
我目前正在学习Redux,但知识不多,我还看了一篇有关Saga的文章,它似乎对于此身份验证过程很有用。
对于后端,我基本上需要安装一些Django扩展,并且我将拥有一些端点,例如:输入用户名/密码并返回访问令牌,使访问令牌过期,注册用户,重设密码等。
现在我知道我需要Redux并使用react-router的Provider和Router。还有关于动作,reduces,store等的基础知识。但是仅此而已。
重要说明:我打算使用钩子代替类组件。
答案 0 :(得分: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的另一种方式