Vue-Resource Authorization 标头无法设置

Question

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

详细说明：

规格：

1. Vue @ 2.2.1
2. Vue 资源@1.3.4
3. Vue 路由器 @ 2.6.0
4. Laravel @ 5.4
5. Laravel Passport @ 2.0

详情：

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

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

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

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

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

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

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

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

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

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

Answer 1

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

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();
}