Vue-Resource Authorization 标头无法设置

Posted 2023-02-22

【中文标题】Vue-Resource Authorization 标头无法设置

【英文标题】：Vue-Resource Authorization header unable to set

【发布时间】：2017-11-30 13:03:54

【问题描述】：

登录后无法在 main.js 文件中将授权标头设置为“Bearer (token)”，显示 401 未授权但在从服务器访问文件列表时刷新后设置标头

详细说明：

规格：

Vue @ 2.2.1 Vue 资源@1.3.4 Vue 路由器 @ 2.6.0 Laravel @ 5.4 Laravel Passport @ 2.0

详情：

我使用“登录”模块登录并使用 Auth 包在本地存储中存储访问和刷新令牌和过期时间，如下所示 -

[图像描述：验证包代码（令牌的设置器和获取器）]

[ 图像描述： 登录模块 sn-p 以在到达时设置令牌 -- 正常工作 ]

如上所示，路由转到'dash'，它加载文件模块但无法从https://localhost:8000/api/files获取数据

[图像描述：未经授权且未刷新] [4

[图片描述：不刷新，Vue.http.headers.common['Authorization']显示“Bearer null”]

但是在刷新页面后传递令牌...！

[图片描述：刷新后，令牌传递成功]

然后继续工作，直到我在退出并重新登录后没有刷新登录页面。

我们将不胜感激任何解决方案。

【问题讨论】：

你找到解决办法了吗？

我找到了解决方案..检查我的答案

【参考方案1】：

你需要拦截每个http请求，并在main.js文件中的请求中添加Authorization头，例如

Vue.http.interceptors.push((request, next) => 
  request.headers.set('Authorization', 'Bearer ' + Vue.auth.getAccessToken())
  next()
)

【讨论】：

正如我在问题中提到的那样。但只有刷新后

【参考方案2】：

在设置令牌和到期后设置您的标头通用，这允许您在登录时设置您的标头。

setToken()
  localStorage.setItem('token', token)
  localStorage.setItem('expiration', expiration)
  Vue.http.headers.common['Authorization'] = 'Bearer ' + this.getToken();

【讨论】：

我在刷新前转储了 Vue.http.headers.common['Authoriztion'] 的值，它不为空。但该值并未随请求发送