axios reponse请求拦截以及token过期跳转问题

Posted 2020-12-01 李vac

前两天项目中遇到了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
    },

完美解决！