Vue 刷新页面后 axios请求拦截器不起作用的解决办法 |
您所在的位置：网站首页 › response拦截器 › Vue 刷新页面后 axios请求拦截器不起作用的解决办法 |
Vue 刷新页面后 axios请求拦截器不起作用的解决办法
|
Vue 刷新页面后 axios请求拦截器不起作用的解决办法
起因：
使用Vue axios作为网络请求的工具，在网页第一次打开时可以进行axios请求，并在config headers中添加token 作为请求令牌。但是，在手动刷新页面之后，网页数据出现无法请求的情况。后台返回:bad token format 后端返回结果如图： 发现headers 中未添加请求头
我在main.js中对axios拦截器进行了配置，对请求时进行了判断，如果token存在，应当向headers中添加token。 然而，在发生如上情况后，我发现自己写的拦截器在页面刷新后根本没有被调用。查询若干资料，最后找到解决的办法：将axios在另一个js 脚本中进行配置，在main.js 中进行引用。最后成功解决问题，在页面刷新后，我的拦截器仍然在作用！ 代码： 新建js 文件，命名为http.js，在这个文件中进行axios配置 import axios from 'axios'; // 创建axios实例 var instance = axios.create({timeout: 1000 * 12}); instance.interceptors.request.use( config => { console.log('发送请求') // console.log(localStorage.getItem('token')) if (localStorage.getItem('token')) { // console.log('请求头加入token') config.headers.token = localStorage.getItem('token') } return config }, error => { console.log('请求失败！！') console.log(error) return Promise.reject(error) }) //异步请求后，判断token是否过期 instance.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: localStorage.removeItem('token'); this.$router.push('/'); } } } ) export default instance; 回到main.js
引入我们配置的axios 实例 import instance from './http' Vue.prototype.$axios = instance之后就可以使用this.$axios 进行网络请求了，也不会出现上述原因引起的拦截器不起作用的情况。 |
【本文地址】
今日新闻 |
推荐新闻 |