vue router 钩子函数 与 axios 拦截器区别

以下内容纯属个人理解，如有不妥欢迎指正！

vue router 钩子函数 与 axios 拦截器区别：

axios的拦截器是针对http请求的拦截，分请求拦截和响应拦截。请求拦截一般会在拦截器中实现请求路径的设置，例如统一前缀、请求头token设置等。如下是统一设置token

axios.interceptors.request.use(config=>{
  //携带token
  let token =  localStorage.getItem(TOKEN);
  if(token){
    config.headers["token"]=token;
  }
  return config;
},error => {
    console.log("前置拦截异常：" )
    console.dir( error);
  Promise.reject(error);
});

响应拦截一般是针对请求接口的响应做一些处理，例如接口响应500错误给出统一提示等等；

vue router 的钩子函数则是针对前台页面路由跳转的拦截，注意区分路由跳转与http请求，http请求是与后台交互的，而路由则是纯前端页面的跳转，因此我们一般在router的钩子函数中做一些路由跳转的相关处理，例如判断权限等等

//前置 路由守卫
router.beforeEach((to,from,next)=>{
  console.log("路由守卫。。。。"+to.path);
//如果要去My或者index页面
  if(to.meta.requiredAuth == true){
    //判断l如果ocalStorage里面是否有Username 并且token没有过期
    var user = JSON.parse(localStorage.getItem('user'));
    if(user != null ){
      //判断角色
      var role = to.meta.role;
      if ((user.userType == 0 && role[0] == 'school') || (user.userType == 1 && role[0] == 'admin')){
        next(true);
      }else {
        next(from);
        alert("暂无权限");
      }
    }else{
      //否则让它跳转到登录界面，跳转到登录界面时，需要把to.path传入，方便在登录成功时跳转到对应界面上
      next({"path":"/user/login",query:{"topath":to.path}})
    }
  }else{
    //否则去其他界面时 让它继续走
    next(true);
  }
})

以上内容纯属个人理解，欢迎大佬拍砖！