axios reponse请求拦截以及token过期跳转问题
- 2019 年 10 月 30 日
- 筆記
前两天项目中遇到了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 },
完美解决！
