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

Question

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

Answer 1

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

Answer 2

收到 jwt 令牌后，您可以为您的 jwt 令牌设置“到期时间”。例如，如果我收到一个 ID 为“abc_token_123”的令牌，我将在 sessionstorage、localstorage 甚至 cookies 中创建一个对象，其键名为 expireTime (例如）。我将在主文件 (App.js) 上使用一个 useEffect 挂钩来观察时间，如果时间超过到期时间，则将用户注销，否则，如果您的存储中存在到期密钥，请保留用户登录。

Answer 3

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

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' 保存到您的本地存储，并设置一些过期时间。

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

How to implement remember me functionality for authentication in ReactJS when i only receive jwt token from backend api

remember-me

jwt

reactjs