什么是身份验证流程？

身份验证流程是确认用户身份并管理他们对应用程序某些部分的访问的过程。当您使用网络应用程序（例如社交媒体网站）时，这涉及检查用户是否是他们所说的人（登录），然后授予他们访问某些功能的权限。

它在 React 中是如何工作的？

在 React 中，当您想要处理用户身份验证时，通常与处理繁重工作的后端服务器进行交互。它通常是这样工作的：

1. 注册和登录端点

• 注册端点：当新用户注册时，他们会将其详细信息（如用户名、电子邮件、密码）发送到服务器。然后服务器为他们创建一个帐户。
• 登录端点：现有用户登录时，会将其用户名和密码发送到服务器。服务器检查这些详细信息是否正确。

2. 令牌：访问令牌和刷新令牌

登录成功后，服务器返回两个重要的token：

• 访问令牌：

  • 这就像一个短期通行证，允许用户访问应用程序的某些功能。它的寿命通常很短（在本例中为 5 分钟）。
  • 每次用户发出请求（例如查看他们的个人资料或发布某些内容）时，此令牌都会发送到服务器以证明他们已登录。

• 刷新令牌：

  • 这就像访问令牌过期时使用的备份通行证。更持久。
  • 当访问令牌过期（5分钟后）时，应用程序可以使用刷新令牌来获取新的访问令牌，而不是让用户再次登录。

3. 在浏览器中存储令牌

用户登录并收到这些令牌后，应用程序需要将它们存储在用户设备上的某个位置。这就是 localStorage 的用武之地：

• localStorage： 这是网络浏览器中的一项功能，允许您在用户的浏览器中存储数据（如令牌）。
  • setItem() 方法： 用于存储数据。例如，您可以使用 localStorage.setItem('accessToken', tokenValue).
  之类的内容存储访问令牌和刷新令牌
  • getItem() 方法： 用于检索存储的数据。例如，您可以使用 localStorage.getItem('accessToken').
  等方式获取存储的访问令牌

4. 使用访问令牌发出请求

每次用户执行需要服务器交互的操作（例如发布状态或查看消息）时，应用程序都会向服务器发送请求，并在授权标头中附加访问令牌。这告诉服务器用户已登录并允许执行该操作。

5. 处理过期令牌

• 访问令牌过期： 如果服务器响应 401 错误，则意味着访问令牌已过期。然后，应用程序将使用刷新令牌来请求新的访问令牌。

• 刷新令牌过期：如果刷新令牌也过期了（这可能会在很长一段时间后发生），服务器将再次响应 401 错误。此时，应用程序会将用户重定向到登录页面，要求他们再次登录以获取新令牌。

6. 重新发送失败的请求

一旦应用程序使用刷新令牌获取新的访问令牌，它将重新发送因令牌过期而失败的原始请求。这样，用户就不会遇到任何中断。

概括

• 身份验证流程：这是应用程序确认您是谁并为您提供功能访问权限的方式。
• 访问令牌：访问应用程序中资源的短期密钥。很快就会过期。
• 刷新令牌： 长期备份密钥，用于在旧访问令牌过期时获取新的访问令牌。
• localStorage： 浏览器在用户设备上存储这些令牌的方式。
• 授权标头： 访问令牌包含在对服务器的请求中。
• 401 错误： 令牌已过期且应用程序需要采取操作（刷新令牌或要求用户重新登录）的信号。

此流程可确保用户可以保持登录状态并安全地使用应用程序，而无需始终重新输入其凭据。