使用 React、JWT 和 cookie 从所有选项卡/设备中注销

Question

我在前端使用 React，在后端使用 Node。 我如何构建身份验证是，当用户登录时，会创建一个 JWT 令牌并将其存储到用户数据模型中。 然后将该令牌存储到 cookie（而不是 Localstorage）中。

另一方面，Localstorage 用于存储用户信息，例如用户名、姓名和电子邮件。

当用户注销时，JWT 令牌被移除，Localstorage 中的 cookie 和 userinfo 也被移除。 我设计了我的 React，如果 Localstorage 中没有用户信息，那么用户将无法访问私有路由。 当用户从所有设备注销时，所有 JWT 令牌都会被删除（但其他设备上的 cookie 和 Localstorage 不会，因为它们是本地的）。

但是，这种方法会导致一些问题：

1. 由于删除所有 JWT 令牌不会从 Localstorage 中删除用户信息，因此仍然可以查看私有路由，这是不可取的
2. 在移除所有 JWT 令牌之后，即使用户想从另一台设备注销，他们也不能，因为现在没有任何令牌，用户无法通过身份验证。

构建 logOutAll 组件的更好方法是什么？

Answer 1

如果没有任何可用的JWT ，为了注销用户，使用 Axios 拦截器可以捕获响应错误和状态。 因此，在您的情况下，API 将响应状态代码401或您发送的任何其他状态代码。 如果 API 以 401 状态失败，您可以添加注销逻辑。

这是使用 Axios 拦截器的代码片段，希望对您有所帮助。

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    const { status } = error.response;
    if (status === 401) {
      // your logout logic goes here        
    }
    return Promise.reject(error);
  }
);