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
        },

    完美解决!

  • 相关阅读:
    CentOS6.8下查看yum及rpm安装后的软件位置
    rabbitmq的web管理界面无法使用guest用户登录
    CentOS6.8搭建rabbitmq消息中间件
    Study 3 —— Python运算符
    CentOS6.x网易163yum源配置
    CentOS6.8下Jenkins+maven+tomcat+git+shell自动构建、部署web应用环境的搭建
    CentOS6.8下安装memcached并设置开机自启动
    CentOS6.8下安装redis并配置开机自启动
    CentOS下查找java环境变量
    CentOS下设置vim的tab键为4格
  • 原文地址:https://www.cnblogs.com/shoucigongkai/p/11763784.html
Copyright © 2011-2022 走看看