Vue中请求拦截、响应拦截和路由元信息使用

1.请求拦截
在使用axios发送登入请求的时候,可以使用拦截器,给请求头加上自己的token

axios.interceptors.request.use(function (config) {

  flag=false
  config.headers.Authorization = window.localStorage.getItem('token');
  return config;
}, function (error) {

  return Promise.reject(error);
});

2.响应拦截
当我们发起请求或者请求回来的时候，我们需要做一定的数据过滤或者拦截,例如说用户要直接进入购物车页面,我们就要判断他是否登入了,如果没有登入,就打回登入页

let flag = false;
http.interceptors.response.use(function (config) {

  if (flag) {
    return config
  }

  if (config.data.meta.status == 400 && config.data.meta.msg == "无效token") {
    Vue.prototype.$message.error('请重新登入')
    router.push('/login')
    flag=true
  } else {
    return config
  }
}, function (error) {
  return Promise.reject(error);
})

此处大家可以看到有一个flag,这是为什么呢?
原因:直接拦截下来后,会出现多次请重新登入的提示,这是因为你所访问的页面本身就有的请求造成的,所以,你可以立一个flag,如果flag为true后,就跳回登入页,其他的直接返回,第二次重新请求的时候,又把flag改为false,虽然会出现闪现的情况,不过问题不大,或者你可以使用路由元信息

3.路由元信息
使用可以参照vue本身的代码https://router.vuejs.org/zh/guide/advanced/meta.html
给子路由后面加 meta: { requiresAuth: true }

// 设置路由规则
const routes = [
  { path: '/login', component: login },
  {
    path: '/index', component: index, children: [
      { path: '/users', component: users , meta: { requiresAuth: true }},   ]
  }
]

注意: meta: { xxx: true } --xxx这个名字是可以随意取得
在导航守卫中:

router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
//需要判断一下token是否存在,我们可以随意发一个不需要传参得请求
 menus().then(res => {
 console.log(res)
 if (res.data.meta.status == 400 && res.data.meta.msg == "无效token") {
  Vue.prototype.$message.error('请重新登入')
  router.push('/login')
	} else {
       next()
       }
    })
  } else {
    next()
   }
})