2017-12-27 397 views
9

我已经创建了爱可信拦截器负责将令牌之前每个请求被发送到我的REST API。爱可信拦截的令牌头出现在配置而不是在请求头

import axios from 'axios'; 
import { store } from '../store/store'; 

export default function execute() { 
    axios.interceptors.request.use(function(config) { 
     const token = store.state.token; 
     if(token) { 
      config.headers.Authorization = `Bearer ${token}`; 
      console.log(config); 
      return config; 
     } else { 
      console.log('There is not token yet...'); 
      return config; 
     } 
    }, function(err) { 
     return Promise.reject(err); 
    }); 
} 

正如你在第2行,我进口vuex存储看到,这实际上是地方我的令牌沉积。在第8行中,我实际上将此令牌添加到config对象,然后在接下来的一行中我将它安慰出来。

它在我main.js执行文件,就像这样:

import interceptor from './helpers/httpInterceptor.js'; 
interceptor(); 

令牌出现在配置对象,我在控制台中看到(因为我安慰config对象):

img

它每次运行时都会按照预期的方式发出一些API请求。如果令牌存在(登录后)它应该为每个请求添加令牌头。不幸的是,它不会添加它,尽管它存在于配置对象中,这使我有点困惑。

实际上它并不增加令牌真正的要求,我可以在网络选项卡中显示:

imgd

这张截图是登录后进行,当然这样的标记已经在vuex储存空间,并安慰我在执行注销功能(这个叫rest API)之后配置了一部分(拦截器的一部分)。

在结果我有400(错误请求)状态,从我休息API响应,因为我没有送令牌。

编辑!

我在想我能加入到这个问题,使之更好。我认为这是不可能的,所以我决定创建一个repository演示,你可以下载并看到你的眼睛问题。我希望它能帮助解决问题!

+0

我应该添加关于如何将令牌存储到vuex存储的信息吗?我不知道这可能与我的问题有关。 – BT101

+0

你可以硬编码的令牌,看看它的工作? –

+0

不幸的是,它并没有改变任何它仍然有相同的行为,当我在拦截器中硬编码令牌。 – BT101

回答

3

我看着办吧。

我不知道,有一些所谓的预检要求其前实际请求REST API执行。如果预检请求失败,它将不接受/接收更多标题。这就是为什么我没有看到它在铬控制台网络选项卡上的实际请求,但它是在拦截器中的console.log ed配置对象。

在库演示这是调用不存在的URL相同的,所以预检请求失败,有作为。在创建这个演示时,我不知道是否存在预检请求这样的事情,所以我确信,如果我打电话给一些现有的URL端点或虚构的请求并不重要,我认为这两种方式我都应该能够看到请求标题在那里。