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

Question

我需要存储通过 REST API 正确注册后有效用户登录时生成的 JWT token 。我阅读并找到了将 JWT 存储在客户端站点中的这些方法:本地存储、 session 存储、cookie、HttpOnly cookie、浏览器内存(React 状态)。
需要建议以正确的方法存储 JWT，并且还可以访问某些 API 以获取 JWT token 作为发布请求 header 参数用户相关数据。
这是我的登录代码部分，此时我将 JWT token 存储到窗口对象，之前保存在本地存储中，但现在需要以除本地存储或 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 token : window.$token = res.data.token谢谢你。

Answer 1

如何存储它取决于您。通常，这是最安全到最不安全的:

浏览器内存

仅 Http cookie

本地存储

session 存储/cookie

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