Question

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

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

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

感谢您对此的提示。

Answer 1

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

Answer 2

如果我将其存储在浏览器的本地存储中，将不赞成使用在下次登录之前，然后假设组件身份验证令牌变得混乱。我不知道该如何处理这个。

这不是正确的，localStorage信息是按文档原点保存的。由应用程序负责检查令牌是否仍然可用（未过期），以及是否将令牌重定向到“登录”页面。

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

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

2 个答案: