axios 拦截器

一，

1. axios 响应拦截器
2. 为什么要使用响应拦截器，在响应后在then，catch 处理之前可以做一些事
3. axios.interceptors.response.use(function(response) {
   console.log(“响应器拦截成功”)
   // 对响应数据做点什么
   return response;
   },(error) => {
   console.log(“响应器拦截失败”)
   // 对响应错误做点什么
   if(err.response && err.response.data.errorCode){
   this.$message.error(err.response.data.msg)
   }
   });
   1.请求拦截器 全局token
   2.为什么要使用请求拦截器，因为token会多次使用会很麻烦使用请求拦截器会方便
   3
   // 添加请求拦截器
   axios.interceptors.request.use((config)=>{
   //添加header的token
   let token = window.sessionStorage.getItem(“token”)
   if(config.oken === true){
   config.headers[‘token’] = token
   }
   console.log(config)
   // 在发送请求之前做些什么
   return config;
   },(error)=> {
   // 对请求错误做些什么
   return Promise.reject(error);
   });

二，
1.防止不断点击
2.用户在点击登录时 可能会因为网路原因 导致不能及时跳转。
此时需要设置一个loading 来 解决这个问题。
3.


表单提交前为true 当登录成功 为false 此时 false 直接登录
当 错误时 为true 显示 登录中。。。
三，全局前置守卫
1.to: Route :即将要进入的目标 路由对象
2.from ：Route ：当前导航正要离开的路由
3.next ：Function:
4router.beforeEach((to,from,next)=>{
let token = window.sessionStorage.getItem(“token”)
if(token){
if(to,path === “/login”){
Vue.prototype.message.error(“请不要重复登录”)
return next({name:from.name})
}
next()
}else{
if(to.path === “/login”){
return next()
}
Vue.prototype.$message.error(“请先登录”)
next({path:"/login"})
}