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

Question

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

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

这是我的登录代码部分，此时我将 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

当然，建议将 JWT 令牌存储在 localStorage 或会话存储中，在生产中使用适当的 SSL 证书来帮助防止这种情况，就像中间人攻击一样。

本地/会话也有不同的优势

sessionStorage 在浏览器关闭后被删除，但 localStorage 在选项卡之间共享。这对于在选项卡之间共享状态很方便。但是，您需要管理删除 JWT 令牌。

Answer 2

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

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

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

Answer 3

更新：将 JWT 令牌存储在本地存储中并不是一个好主意。

阅读这篇文章 => https://www.rdegges.com/2018/please-stop-using-local-storage/

---

使用 localStorage 设置令牌

    if (res.type === 'success')
        localStorage.setItem('token', res.data.token);
        setLoginSuccess('Successfully Login')
        setTimeout(()=> {
            setLoginSuccess('');
        }, 3000)
        cart.handle({ action_type: "RESET_ITEMS" });
        Router.push('/account')
    } 

删除您使用的令牌： localStorage.removeItem('token');