axios reponse請求攔截以及token過期跳轉問題

前兩天項目中遇到了token攔截，需要在請求的header頭里放置token，需要用到response攔截，調試過程中遇到了拿不到token的問題

　我用的axios實例

 let token = store.state.token
instance.interceptors.request.use(config => {
   
    // 在發送請求之前做些什么
    //判斷是否存在token，如果存在將每個頁面header都添加token
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    // console.log('token===>',store.state.token);
    if(token!==''){
        config.headers.common['token'] = token;
    }
    return config;
}, error => {
    // 對請求錯誤做些什么
    return Promise.reject(error);
});

總是拿不token

后來根據請求步驟一步步檢查發現

取token應該放到reponse攔截內，放到攔截外因為初始化登錄頁的時候api已經被調用，這時候還沒拿到token。所以token是空的

正確的代碼應該是

 instance.interceptors.request.use(config => {
    let token = store.state.token
    // 在發送請求之前做些什么
    //判斷是否存在token，如果存在將每個頁面header都添加token
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    // console.log('token===>',store.state.token);
    if(token!==''){
        config.headers.common['token'] = token;
    }
    return config;
}, error => {
    // 對請求錯誤做些什么
    return Promise.reject(error);
});

完美拿到了token，可是token過期登錄時總是提示 'router' is not defined 或者是 ‘router’ is not token

原因是由於單獨調用的axios無法正常獲取router

我用了最簡單的方法，繞過router

// http response 攔截器
let self = this
instance.interceptors.response.use(
    response => { 
        if (response) {
            if (response.data.status == "401") {
                    store.commit('del_token');
                    window.location.href='#/login'
                    // window.routes.push({
                    //     path: '/login',
                        
                    //     // query: {redirect: router.currentRoute.fullPath}//登錄成功后跳入瀏覽的當前頁面
                    // })
            }
        }
        return response
    },

完美解決！