选择适当的应用程序架构来处理不记名令牌

Question

我想使用使用 OAuth 2.0 的 API

简而言之，我需要获取一个访问令牌，我必须将其包含在每个后续请求中，以便服务器可以确认我的身份。

在应用程序中执行此操作的架构会是什么样子？有人可以推荐一篇文章吗？

目前，我在每个请求上从 API 获取新令牌以执行请求的效率很低。

是否存在保存不记名令牌并重复使用直至其过期的最佳实践？

我想在我的应用程序中使用 Vue.js。

Answer 1

正如您所说，在每个请求上请求新令牌是没有意义的。

登录后，最好的方法是将返回的令牌存储在 localStorage 中，因此无论用户是否刷新浏览器，应用程序都会从​​存储中获取 Bearer。

完成此操作后，您应该在每个 axios 请求中附加当前有效的 Bearer 令牌。 IE：

axios.defaults.headers = {
    common: {
        'X-Requested-With': 'XMLHttpRequest',
        'Access-Control-Allow-Origin': '*',
        'Authorization': 'Bearer ajsyHjdjkakl;ds......'
    }
}

仅供参考，有很多软件包可以帮助您处理此问题，否则，请准备好面对一些令人头痛的问题。我个人从很久以前就开始使用这个： https://websanova.com/docs/vue-auth /主页