Axios interceptor token header is present in confi

问题:

I've created axios interceptor which is responsible for adding token before every request is send to my 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);
    });
}

As you can see in line 2 I'm importing vuex storage and this is actually place where my token is deposited. In line 8 I'm actually adding this token to config object and then in next line I'm consoling it out.

It is executed in my main.js file like so:

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

The token is present in config object which I see in my console (because i consoled config object):

It runs every time that I make some request to rest API as expected. If token exist (after login) it should add token header to every request. Unfortunately it doesn't add it although it is present on config object which makes me a bit confused.

It doesn't actually add token to real request as I can see in network tab:

This screenshot is of course taken after login so the token is already in vuex storage and it consoled out config (part of interceptor) after I executed logout function (which call rest API).

In result I have 400 (Bad request) status in response from my rest API because I didn't sent token.

EDIT!!!

I was thinking what can I add to this question to make it better. I think that this is impossible to create demo plunker so I decided to create little repository demo which you can download and see issue for your eyes. I hope it'll help to solve the problem!

回答1:

I figure it out.

I didn't know that there is something called preflight request which is executed before real request to rest API. If preflight request fail it will not accept/receive more headers. This is why I didn't see it on real request in chrome console network tab but it was in config object which was console.loged in interceptor.

Same in repository demo which was calling not existing URL so preflight request failed there as well. While creating this demo I had no idea that such thing as preflight request exist so I was sure that it doesn't matter if I'll call some existing URL endpoint or fictitious one, I thought that in both way I should be able to see request header there.

回答2:

You could also manipulate the response to cleanup token when expired.

  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    if (401 === error.response.status) {
      console.log("Session Expired")
      //window.location = '/login'
    } else {
      return Promise.reject(error);
    }
  });