[代碼筆記]VUE路由根據返回狀態判斷添加響應攔截器


//返回狀態判斷(添加響應攔截器)
Axios.interceptors.response.use(
  res => {
    //對響應數據做些事
    if (res.data && !res.data.success) {
      Message({
        //  餓了么的消息彈窗組件,類似toast
        showClose: true,
        message: res.data.error.message.message
          ? res.data.error.message.message
          : res.data.error.message,
        type: "error"
      });
      return Promise.reject(res.data.error.message);
    }
    return res;
  },
  error => {
    // 用戶登錄的時候會拿到一個基礎信息,比如用戶名,token,過期時間戳
    // 直接丟localStorage或者sessionStorage
    if (!window.localStorage.getItem("loginUserBaseInfo")) {
      // 若是接口訪問的時候沒有發現有鑒權的基礎信息,直接返回登錄頁
      router.push({
        path: "/login"
      });
    } else {
      // 若是有基礎信息的情況下,判斷時間戳和當前的時間,若是當前的時間大於服務器過期的時間
      // 乖乖的返回去登錄頁重新登錄
      let lifeTime = JSON.parse(window.localStorage.getItem("loginUserBaseInfo")).lifeTime * 1000;
      let nowTime = new Date().getTime(); // 當前時間的時間戳
      if (nowTime > lifeTime) {
        Message({
          showClose: true,
          message: "登錄狀態信息過期,請重新登錄",
          type: "error"
        });
        router.push({
          path: "/login"
        });
      } else {
        // 下面是接口回調的satus ,因為我做了一些錯誤頁面,所以都會指向對應的報錯頁面
        if (error.response.status === 403) {
          router.push({
            path: "/error/403"
          });
        }
        else if (error.response.status === 500) {
          router.push({
            path: "/error/500"
          });
        }
        else if (error.response.status === 502) {
          router.push({
            path: "/error/502"
          });
        }
        else if (error.response.status === 404) {
          router.push({
            path: "/error/404"
          });
        }
      }
    }
    // 返回 response 里的錯誤信息
    let errorInfo =  error.data.error ? error.data.error.message : error.data;
    return Promise.reject(errorInfo);
  }
);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM