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

【问题标题】：Where should I store JWT token?我应该在哪里存储 JWT 令牌？
【发布时间】：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

标签： javascript vue.js jwt vuex

【解决方案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
    }
);

【讨论】：

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