如何检查用户是否已登录以及如何保存其信息？（反应）

Question

差不多我做了一个登录页面，与后端进行通信以登录用户。现在，我想获取他们的数据并将其存储以供所有其他组件使用，以了解

1. 用户登录
2. 有权访问用户的信息

根据过去的StackOverflow答案，我认为最好的方法是使用JWT和LocalStorage。但是我遇到的所有答案似乎都在使用Redux。我的应用程序根本没有使用Redux，也不知道如何使用它，所以我想知道是否有一种方法可以不使用Redux。

Answer 1

您不需要Redux。您只需要将JWT存储在localStorage中。为此，localStorage.setItem('token', data.token)请在从API收到登录成功响应时使用。就这么简单。您可以阅读本文以了解更多详细信息。它用于React Redux应用程序，但不需要Redux。

然后，假设您正在使用react-router，则需要两个帮助函数。第一个将遵循您的受保护路线，如下所示：

const requireAuth = (...) => {
  if(!localStorage.getItem('token')) {
    // go to login route
  }
  // stay on this route since the user is authenticated
}

第二条在您不受保护的路线上进行，如下所示：

const verifyAuth = (...) => {
  if(localStorage.getItem('token')) {
    // go to your dashboard or home route
  }
  // stay on this route since the user is not authenticated
}

请记住，您必须根据服务器的到期时间刷新令牌。一个好的方法是创建一个到服务器的呼叫，询问令牌是否仍然有效。