时间戳

首页 > 解决方案 > 如何使用 Redux 在前端实现身份验证？

reactjs - 如何使用 Redux 在前端实现身份验证？

问题描述

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

我不想要这个的实现，只是图书馆来帮助我，如果保存令牌之类的东西，我在哪里保存它？

我目前正在学习 Redux 并且知识很少，我也看到了一篇关于 Saga 的文章，它似乎对这个身份验证过程很有用。

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

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

重要提示：我打算使用钩子而不是类组件。

标签： reactjsauthenticationreduxredux-saga

解决方案

简短说明：

我建议您使用 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';
}

auth 使用 cookie 的另一种方法

推荐阅读