vue-router导航守卫使用axios, 没经过axios 拦截器

最近在写一个在线学习系统,并支持浏览课程信息页面,前提是用户参选过了本课程(否则不能进去)

所以我在 vue router 全局前置守卫中使用axios获取检查选课记录, 然而在导航守卫中axios请求并未经过axios拦截器的处理,特别奇怪,折磨了我3个小时!!(虽然自己在 axios.get中配置一下header即可,但不解决这个问题,真的很难受)

最后我把mian.js 中的 axios拦截器配置写在一个 utils/axios.js 文件中, 然后在main.js 中 import ‘@/utils/axios.js’ 成功解决!!! 额,虽然到头来,也不知道为什么,知道的码友在评论区分享一下

router/index.js


 const routes = [
  {
    path: '/course/:cid',
    component: () => import('@/views/course_index')
   }
   ....
 ]


router.beforeEach(async (to, from, next) => {
	.........
	if(to.params.cid){ //这个表示进入有关课程信息的页面
		const rs = await axios.get(...) //检查是否选过课
		....
	}
}

main.js–> utils/axios.js

axios.interceptors.request.use(
  config => {
  	console.log(1) //没有打印
    if (store.getters.getToken) {
      config.headers.Authorization = store.getters.getToken
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

axios.interceptors.response.use(
  res => {
    if (res.data.code === 200) {
      return Promise.resolve(res.data.data) 
    }
  },
  error => {
    return Promise.reject(error)
  }
)
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值