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

Question

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

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

这是我的登录代码部分，此时我将 JWT 令牌存储到 window 对象，之前保存在本地存储中，但现在需要以除本地存储或 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 攻击。

Answer 2

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

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

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

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');