Vue-Resource Authorization标头无法设置

Question

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

详细说明：

规格：

1. Vue @ 2.2.1
2. Vue Resource @ 1.3.4
3. Vue Router @ 2.6.0
4. Laravel @ 5.4
5. Laravel Passport @ 2.0

详细信息：

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



[图片描述>验证包裹代码（令牌的设定者和取景器）]



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

如上所示，路线转到'破折号'，它加载文件模块但无法从https://localhost:8000/api/files

获取数据



[图片描述未经授权未经刷新] [ 4

[图片desc：没有刷新，Vue.http.headers.common ['授权']显示“Bearer null”]

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

[ Imag desc：刷新后，令牌成功传递]

  

继续工作，直到我在退出后不再刷新登录页面并再次登录。

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

Answer 1

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

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

Answer 2

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

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