如何在react/next.js应用程序中安全地存储JWT令牌？

Question

我需要存储 JWT 令牌，该令牌是在有效用户通过 REST API 正确注册后登录时生成的。我阅读并找到了在客户端站点存储 JWT 的这些方法：本地存储、会话存储、cookie、HttpOnly cookie、浏览器内存（React 状态）。

需要建议以正确的方法存储 JWT，并且还可以访问某些 API 以使用 JWT 令牌作为 post 请求标头参数用户相关数据进行获取。

这是我的登录代码部分，此时我将 JWT 令牌存储到窗口对象，之前保存在本地存储上，但现在需要以除本地存储或 cookie 之外的其他方式安全存储。

const handleSubmitLogin = evt => {
evt.preventDefault();
var cart = new Cart();

var request = new NFRequest();
var response = request.api(HTTP_METHOD.POST, '/auth', {
    'email_address': allValuesLogin.email_login,
    'password': allValuesLogin.password_login,
    'cart_list': cart.getCartPostData(),
});
response.then((res) => {
    if (res.type === 'success') {
        window.$token = res.data.token
        setLoginSuccess('Successfully Login')
        setTimeout(()=> {
            setLoginSuccess('');
        }, 3000)
        cart.handle({ action_type: "RESET_ITEMS" });
        Router.push('/account')
    } else {
        setLoginError('Wrong Email or Password')
        setTimeout(()=> {
            setLoginError('');
        }, 3000);
    }
});
}

我在这里存储 JWT 令牌：window.$token = res.data.token

谢谢。

Answer 1

如何存储它取决于您。一般来说，这是最安全到最不安全的：

1. 浏览器内存
2. 仅限 HTTP 的 Cookie
3. 本地存储
4. 会话存储/cookie

最重要的是确保您的网站免受 XSS 和 CSRF 攻击。