码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-10-30 12:03:11      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:api   elf   ade   ==   错误   ror   原因   class   self   

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

完美解决!

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

标签:api   elf   ade   ==   错误   ror   原因   class   self   

原文地址:https://www.cnblogs.com/shoucigongkai/p/11763784.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!