我应该在哪里存储 JWT 令牌？

Posted 2023-03-07

【中文标题】我应该在哪里存储 JWT 令牌？

【英文标题】：Where should I store JWT token?

【发布时间】：2019-04-25 19:55:42

【问题描述】：

我正在使用 vue.js 和 vuex 开发一个应用程序，它使用 JWT 令牌对 JSON API 服务器进行身份验证。 所以我想知道存储 JWT 令牌的最佳做法是什么？

如果我存储在vuex store中，刷新页面后会丢失，需要用户重新登录，不太方便。

如果我将它存储在浏览器的本地存储中，它会在下次登录之前被弃用，然后假设身份验证令牌的组件会混淆。我不知道如何处理。

感谢您对此的提示。

【问题讨论】：

使用 cookie，它适合您的问题

可以使用localStorage

@PareshGami 我解释了 localStorage 的问题。

在现场再次使用时必须检查令牌

这是一篇来自 dev.to 的精彩文章，其中包含一些有意义的外部资源，可帮助您在 cookie 和 localStorage 之间做出选择：dev.to/rdegges/please-stop-using-local-storage-1i04

【参考方案1】：

如果我将它存储在浏览器的本地存储中，它就会被弃用 在下一次登录之前，然后假设组件 身份验证令牌感到困惑。我不知道如何处理 这个。

这不是真的，localStorage 信息是按文档来源保存的。 应用程序有责任检查令牌是否仍然可用（未过期），如果没有将他重定向到登录页面。

您应该将过期时间延长到重新登录的合理时间，并且您应该考虑一个合适的算法来扩展他的 JWT 令牌。例如，每次用户向服务器发出请求并剩下 1 小时时，您可以增加登录时间 1 天。

【参考方案2】：

下面是我使用 axios 库的 react 项目的快照，其中我遇到了类似的问题。当来自服务器的响应为 401（未验证）时，我使用另一个没有过期日期的令牌（refreshToken）请求了一个新的 JWT 令牌

axios.interceptors.response.use(
    ok => ok,
    err => 
        if(err.response.status === 401) 
            return axios
                    .get('/api/oauth/token/refresh', 
                        headers: 'Authorization': `Bearer $localStorage.getItem('refreshToken') `
                    )
                    .then((data) => 
                        // in data is new access token
                        err.config.headers['Authorization']=`Bearer $data.token`;
                        return axios(err.config)
                    );

         

        throw err
    
);

【讨论】：

有什么好处？如果可以随时刷新，为什么要让它过期？