vue 路由拦截器和请求拦截器

vue 拦截器

• 路由导航守卫

// 路由导航守卫
    router.beforeEach((to,from,next)=>{
      // to 是从哪里来
      // from 去哪里
      // next  next() 代表放行  next('/login') 强制跳回login页面
      // 1 判断当前路由是不是/login 如果是直接放行
      if(to.path=='/login') return next();
      // 2 判断当前路由不是/login,那么就获取他的token
      const token = sessionStorage.getItem('token');
      // 3 如果token 不存在，强制跳回 /login
      if(!token) return next('/login');
      // 4 如果token 存在。则继续放行
      next();
})

• 请求拦截器 (当发送请求时才会触发此功能)

  axios.interceptors.request.use(function (config) {
      let token = window.localStorage.getItem("token");
          if (token) {
              config.headers.token = token;    //将token放到请求头发送给服务器
          }
         return config; // 最终需要返回config
        }, function (error) {
        return Promise.reject(error);
  });

• 响应拦截器 (获取响应值时才会触发此功能)

  axios.interceptors.response.use(
    response => {
      if (response.data.code == 9000) {
        alert(response.data.msg);
        router.push({
          path: "/login"
        });
      }
      return response;
    },
    error => {
      // 这里对 error 预期结果是包含具体错误信息和状态码
      if (error && error.response && error.response.status) {
        switch (error.response.status) {
          case 500:
            // do something...
            break;
          case 404:
            // do something...
            break;
          default:
            // do something...
            break;
        }
      }
    }
);