vue封装的axios拦截器里怎么获取当前的url参数？

Question

现在我封装了个axios拦截器，我每次请求接口都需要url里的user_id参数信息，所以想封装到axios拦截器里，但是在拦截器里this.$route.query获取不到报错，该怎么获取url里的参数？

下边这种写法报错

const service=axios.create({  
  timeout:5000  
});  
  
  
service.interceptors.request.use(  
  config=>{  
    console.log('config',config);  
    config.data['uid']=this.$route.query.uid;  
  
    return config  
  },  
  error => {  
    console.log(error);  
    return Promise.reject(error);  
  }  
);

Answer 1

import router from '../router';
config.data['uid']=router.history.current.query.uid; 

Answer 2

竟然在回答的时候修改了问题。。。
router对象不是通过vue注册进去的吗，这部分代码可能在main.js里，那么你的axios的拦截器也在这里设置就可以直接访问route对象拿到了

---

方案一：自己在自定义的js里写一个解析的方法，如：

function queryParse(queryStr) {
    var res = {};
    new URLSearchParams(queryStr).forEach((v,k) => res[k] = v);
    return res;
}

var href = 'http://localhost:8080/#/user/1?name=vue&age=7'

console.log(queryParse(href.slice(href.indexOf('?'))));

方案二：通过事件监听传输路由对象，如：

// vue里引入message.js
var script = document.createElement('script');
script.onload = function() {
    window.postMessage({target: 'self'});
}
script.src = 'message.js';
document.body.appendChild(script);

// message.js
window.addEventListener('message', function(e) {
    // 拿到传输过来的数据
    console.log(e.data);
})

方案三：放到全局变量上共享。

Answer 3

封装axios请求文件，返回一个带参函数, main.js里导入并执行传入vm, 正常用vm.$route处理,

单独处理的话可以考虑 new URL

main.js

import Vue from 'vue';
import http from './request';

const vm = new Vue({
    ...
}).$mount('#app');
http(vm);

request.js

import Vue from 'vue';
import axios from 'axios';
Vue.prototype.axios = axios;
export default (vm) => {
    axios.interceptors.request.use(config => {
        // 根据config.method处理传参
        //config.params.uid = vm.$route.query.uid;
        config.data.uid = vm.$route.query.uid;
    });
}