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

Question

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

如果我将其存储在vuex商店中，则页面刷新后它会丢失，因此用户需要再次登录，这不是很方便。

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

感谢你对此的暗示。

Answer 1

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

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

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

Answer 2

下面是我使用axis库的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
    }
);