In the project, vue is used to build the front-end page, and axios requests the back-end api interface to complete the data interaction. If the password token is written in each interface, it is not only a small physical work, but also inflexible. Here we share the use of vue's own interceptor to add token to the header of each request, and it is compatible with IE9.

import axios from 'axios';

// There config Include the content of each request. Here token Put it in the request header
axios.interceptors.request.use(function (config) {  
    let token = window.localStorage.getItem("tokenid");  //Fetch from cache token
    if (token) {
        config.headers.Authorization = token;    //take token Send the request hair to the server

        //This is mainly for compatibility IE9
        var browser = navigator.appName;
        var b_version = navigator.appVersion;
        if (browser == 'Netscape' && b_version.indexOf(';') < 0) {  //Firefox

        } else {
            if (b_version.indexOf(';') < 0) {
                return config;
            }
            var version = b_version.split(";");
            var trim_Version = version[1].replace(/[ ]/g, "");

            if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {  //IE9
                if (config.url.indexOf('?') > 0) {
                    config.url = config.url + "&token=" + JSON.parse(token).value;
                }
                else {
                    config.url = config.url + "?token=" + JSON.parse(token).value;
                }
            }
        }
    } else {
       localStorage.clear();  //wipe cache
       if (router.currentRoute.name && router.currentRoute.name.toLowerCase() == "login") {  
    　　　　//You need to exclude login here(Or for the first time token)I didn't handle the request verification at the time
　　　　　  //My backstage api Interface, no login Interface to do token Validation, so no processing here
        } else {    　　　　
    　　　　//In addition to the login interface,Other needs token The method of verification will go here and return null
            return null;
        }
    }
    return config;
}, function (err) {
    // return Promise.reject(err);
});


// http response Interceptor
axios.interceptors.response.use(
    response => {
        return response;  //Returned when the request succeeds data
    },
    error => {
        try {
            if (error.response) {
                switch (error.response.status) {
                    case 401://token Expire, clear token And jump to the login page
                       localStorage.clear();
                       var baurl = window.location.href;
               　　　　　router.replace({
                                path: 'login',
                                query: { backUrl: baurl }
                            });                      
                        return;
                }
            }
            return Promise.reject(error.response.data)
        }
        catch (e) {

        }
    });

Write it at the back. Because my token is placed in the cache, before each request, I will take out the token at the front end and verify its timeliness. If it expires or does not exist, I will jump to the landing page first, rather than go to the interceptor to request. Refer to the mounted() method for details.