基于vueRouter实现

#使用beforeEach(前置护卫)实现
router.beforEach((to,from,next)=>{
   if(to.name.match(xxx) {
    // token/cookie等信息判断
    next(path) // 重定向指定页面
   } else {
     next()
   }
})
#使用afterEach(后置护卫)实现(无next参数，无法进行重定向)
router.afterEach((to,from)=>{
   if(to.name.match(xxx))  ...//获取、更改页面标题、声明页面等辅助功能
})

# 导航解析流程
1.  导航被触发。
2.  在失活的组件里调用 `beforeRouteLeave` 守卫。
3.  调用全局的 `beforeEach` 守卫。
4.  在重用的组件里调用 `beforeRouteUpdate` 守卫(2.2+)。
5.  在路由配置里调用 `beforeEnter`。
6.  解析异步路由组件。
7.  在被激活的组件里调用 `beforeRouteEnter`。
8.  调用全局的 `beforeResolve` 守卫(2.5+)。
9.  导航被确认。
10.  调用全局的 `afterEach` 钩子。
11.  触发 DOM 更新。
12.  调用 `beforeRouteEnter` 守卫中传给 `next` 的回调函数，创建好的组件实例会作为回调函数的参数传入。

基于axios实现

const http = axios.create({
 bsaeURL,
 timeout: xxx
})
baseUrl = process.env.VUE_APP_BASE_API;//process.env.VUE_APP_BASE_API 是环境变量文件里设置好的地址，三个环境变量文件在启动或者运行项目的时候只会执行一个
// 请求拦截
http.interceptor.request.use(config=>{
   const token = localStorage.getItem('token');
   if (token) config.headers.Authorization = `Bearer${token}` 
   return config
},error=>{
   return Promise.reject(error)
})
// 响应拦截
http.interceptor.response.use(config=>{
  const { message, success } = response.data;
  if(success) {
    this.$Message.sucess(message)
  } else {
    this.$Message.error(message);
    return Promise.reject(message)
  }
},error=>{
   if (error.response.status === 401 && error.response.data.code === 10002) { 
     // 1. 清除个人信息和token 
     localStorage.removeItem('token')
     // 2. 跳转到首页 
     router.push('/login') 
     // 3. 提示用户 
     this.$Message.error('登录超时正在退出...') 
   } else { 
     this.$Message.error('服务器异常') 
   } 
   return Promise.reject(error)
})