zoukankan      html  css  js  c++  java
  • 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
        },

    完美解决!

  • 相关阅读:
    Oracle 修改带数据的字段类型
    Oracle的主键约束、唯一约束与外键约束
    Oracle 唯一 索引 约束 创建 删除
    Oracle 在Drop表时的Cascade Constraints
    iTunes备份注意
    谈判的四种风格
    求平均速度
    网站推荐的代码自动生成软件实际使用感触
    DOTA游戏相关的文章
    魔兽争霸3不能弹出输入法原因
  • 原文地址:https://www.cnblogs.com/shoucigongkai/p/11763784.html
Copyright © 2011-2022 走看看