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;
        }
      }
    }
);