当我只从后端api接收jwt令牌时，如何在ReactJS中实现记住我的身份验证功能

Question

我目前必须实现记住功能来记住我在前端网站上的登录信息。当我只从后端 API 接收 jwt 令牌时，如何在 ReactJS 中实现记住我的身份验证功能。

Answer 1

收到 jwt 令牌后，您可以为 jwt 令牌设置“到期时间”。例如，如果我收到一个 id 为“abc_token_123”的令牌，我将在

sessionstorage

、

localstorage

甚至

cookies

内创建一个对象，并使用名为 expireTime 的键（例如）。我将在主文件（App.js）上使用 useEffect 挂钩来监视时间，如果时间超过到期时间，则将用户注销，否则，如果存储中存在到期密钥，则保留用户已登录。

Answer 2

如果用户选择记住我选项，则将 JWT 存储在浏览器本地存储中。假设您可以更改后端 JWT 过期时间，在用户选择记住我的情况下延长 JWT 过期时间（无论登录之间可接受的天数）。

Answer 3

您可以通过创建“记住我”复选框并为其提供参考来实现此功能：

const rememberCheck = useRef(null)

在这种特殊情况下，我使用

useState

来声明凭据，因为我认为只需将输入字段设置为 localStorage 上的值即可更轻松地在输入字段上设置

defaultValue

：

const [email, setEmail] = useState(localStorage.getItem("myapp-email") || "");
  const [password, setPassword] = useState(localStorage.getItem("myapp-password") || "");

然后创建一个函数来检查是否应该记住它：

function remember(){
        if(rememberCheck.current.checked){
          localStorage.setItem("myapp-email", email); localStorage.setItem("myapp-password", password)
        }
        else{
          localStorage.setItem("myapp-email", ""); localStorage.setItem("myapp-password", "")
        }
      }

然后使用此函数来增加您的

submit()

函数，检查 API 调用的响应，如果是

200

（从后端收到的 JWT 令牌），则调用

remember()

函数将您的登录名和密码存储在

localStorage

上.

注意：另请记住，“email”和“password”键在所有应用程序之间共享，因此最好在其上设置一个标志，例如“myapp-email”和“myapp-password”。

Answer 4

我更喜欢@Hopey One 的想法。

如果用户选择，则将 JWT 存储在浏览器本地存储中 记住我选项。

就我而言，我需要一个令牌来时不时地与API进行通信（但现在我在

localStorage

中没有令牌，因为用户没有选择“记住我”选项）。所以我用了一个状态来保持它。一切工作都很完美，但问题是当我刷新页面时我的令牌为空。因此，当用户未选择“记住我”选项时，我使用 sessionStorage 来存储令牌。这是我的

useAuth

自定义挂钩文件中的代码示例。

const [token, setToken] = useState(
  sessionStorage.getItem('token') || localStorage.getItem('token'),
);

const login = (token: string, rememberMe = false) => {
  if (rememberMe) {
    localStorage.setItem('token', token);
  } else {
    sessionStorage.setItem('token', token);
  }
  setToken(token);
};

const logout = () => {
  localStorage.removeItem('token');
  sessionStorage.removeItem('token');
  setToken(null);
};

Answer 5

在线搜索后，我在这个网站找到了这个答案。该网站还扩展了如何加载它。

function setWithExpiry(key, value, expiration) {
    const now = new Date()

    // `item` is an object which contains the original value
    // as well as the time when it's supposed to expire
    const item = {
        value: value,
        expiry: now.getTime() + expiration,
    }
    localStorage.setItem(key, JSON.stringify(item))
}

您这样做是为了设置一种将

'RememberMe'

保存到本地存储并具有一定过期时间的方法。

Answer 6

const [userID, setUserID] = useState(null);
const [isRemembered, setIsRemembered] = useState(false);

useEffect(() => {
  const storedID = localStorage.getItem("userID");
  const remembered = localStorage.getItem("isRemembered") === "true";
  setUserID(storedID);
  setIsRemembered(remembered);
  // If remembered, fetch token and potentially set user state
}, []);

const handleLogin = async () => {
  // ... login logic ...
  if (isRemembered) {
    localStorage.setItem("userID", userData.id); // Store user ID
  } else {
    localStorage.removeItem("userID"); // Clear stored ID
  }
};

const handleLogout = () => {
  localStorage.removeItem("userID");
  localStorage.removeItem("isRemembered");
  // ... logout logic ...
};

1. 存储：使用 localStorage 作为用户 ID 和 isRemembered 标志（不是密码！）。

2. 复选框和存储：添加“记住我”复选框。仅在选中时才存储数据。

3. 检索：在组件安装时，检查存储的数据。

4. 逻辑：

   • 如果用户ID并且被记住：
   • 使用用户ID从后端获取新的JWT（依赖于后端）。
   • 如果成功，将用户状态设置为已登录。
   • 否则，继续正常登录。

5 . 安全：

• 切勿以纯文本形式存储密码。
• 设置“记住我”功能的过期时间。
• 考虑使用 HttpOnly cookie 以提高安全性。

6. 注销：注销时清除存储的数据。