Vue 2.x折騰記 - (10) 給axios作個挺靠譜的封裝(報錯,鑑權,跳轉,攔截,提示)

時間 2019-11-05

標籤 vue 2.x 折騰 axios 靠譜封裝報錯攔截提示欄目軟件設計简体版

原文原文鏈接

前言

不推薦徹底copy過去,能夠看看我是如何針對我這邊業務;javascript

作的一個axios的封裝及實現的思路vue

需求及實現

統一捕獲接口報錯
彈窗提示
報錯重定向
基礎鑑權
表單序列化

實現的功能

統一捕獲接口報錯 : 用的axios內置的攔截器
彈窗提示: 引入 Element UI的Message組件
報錯重定向: 路由鉤子
基礎鑑權: 服務端過時時間戳和token,還有藉助路由的鉤子
表單序列化: 我這邊直接用qs(npm模塊),你有時間也能夠本身寫

效果圖

坑都已經爬過,如今復現那些錯誤有點麻煩..因此無法錄製動態圖java

用法及封裝

用法

// 服務層 , import默認會找該目錄下index.js的文件,這個可能有小夥伴不知道
// 能夠去了解npm的引入和es6引入的理論概念
import axiosPlugin from "./server"; 
Vue.use(axiosPlugin);

複製代碼

對axios的封裝(AXIOS:index.js)

import axios from "axios";
import qs from "qs";
import { Message } from "element-ui";
import router from "../router";

const Axios = axios.create({
  baseURL: "/", // 由於我本地作了反向代理
  timeout: 10000,
  responseType: "json",
  withCredentials: true, // 是否容許帶cookie這些
  headers: {
    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
  }
});

//POST傳參序列化(添加請求攔截器)
Axios.interceptors.request.use(
  config => {
    // 在發送請求以前作某件事
    if (
      config.method === "post"
    ) {
      // 序列化
      config.data = qs.stringify(config.data);
      // 舒適提示,如果貴公司的提交能直接接受json 格式,能夠不用 qs 來序列化的
    }

    // 如果有作鑑權token , 就給頭部帶上token
    // 如果須要跨站點,存放到 cookie 會好一點,限制也沒那麼多,有些瀏覽環境限制了 localstorage 的使用
    // 這裏localStorage通常是請求成功後咱們自行寫入到本地的,由於你放在vuex刷新就沒了
    // 一些必要的數據寫入本地,優先從本地讀取
    if (localStorage.token) {
      config.headers.Authorization = localStorage.token;
    }
    return config;
  },
  error => {
    // error 的回調信息,看貴公司的定義
    Message({
      // 餓了麼的消息彈窗組件,相似toast
      showClose: true,
      message: error && error.data.error.message,
      type: 'error'
    });
    return Promise.reject(error.data.error.message);
  }
);

//返回狀態判斷(添加響應攔截器)
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(); // 當前時間的時間戳
      console.log(nowTime, lifeTime);
      console.log(nowTime > lifeTime);
      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"
          });
        }
        if (error.response.status === 500) {
          router.push({
            path: "/error/500"
          });
        }
        if (error.response.status === 502) {
          router.push({
            path: "/error/502"
          });
        }
        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);
  }
);

// 對axios的實例從新封裝成一個plugin ,方便 Vue.use(xxxx)
export default {
  install: function(Vue, Option) {
    Object.defineProperty(Vue.prototype, "$http", { value: Axios });
  }
};


複製代碼

路由鉤子的調整(Router:`index.js`)

import Vue from "vue";
import Router from "vue-router";
import layout from "@/components/layout/layout";
// 版塊有點多,版塊獨立路由管理,裏面都是懶加載引入
import customerManage from "./customerManage"; // 客戶管理
import account from "./account"; //登陸
import adManage from "./adManage"; // 廣告管理
import dataStat from "./dataStat"; // 數據統計
import logger from "./logger"; // 日誌
import manager from "./manager"; // 管理者
import putonManage from "./putonManage"; // 投放管理
import error from "./error"; // 服務端錯誤
import { Message } from "element-ui";

Vue.use(Router);

// 請跳過這一段,看下面的
const router = new Router({
  hashbang: false,
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/adver",
      component: layout,
      children: [
        ...customerManage,
        ...adManage,
        ...dataStat,
        ...putonManage,
        ...manager,
        ...logger
      ]
    },
    ...account,
    ...error
  ]
});

// 路由攔截
// 差點忘了說明,不是全部版塊都須要鑑權的
// 因此須要鑑權,我都會在路由meta添加添加一個字段requireLogin,設置爲true的時候
// 這貨就必須走鑑權,像登陸頁這些不要,是能夠直接訪問的!!!
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireLogin)) {
    // 判斷是否須要登陸權限
    if (window.localStorage.getItem("loginUserBaseInfo")) {
      // 判斷是否登陸
      let lifeTime =
        JSON.parse(window.localStorage.getItem("loginUserBaseInfo")).lifeTime *
        1000;
      let nowTime = (new Date()).getTime(); // 當前時間的時間戳
      if (nowTime < lifeTime) {
        next();
      } else {
        Message({
          showClose: true,
          message: "登陸狀態信息過時,請從新登陸",
          type: "error"
        });
        next({
          path: "/login"
        });
      }
    } else {
      // 沒登陸則跳轉到登陸界面
      next({
        path: "/login"
      });
    }
  } else {
    next();
  }
});

export default router;

複製代碼

axios可配置的一些選項,其餘的具體看官網說明哈node

export default {
  // 請求地址
  url: "/user",
  // 請求類型
  method: "get",
  // 請根路徑
  baseURL: "http://www.mt.com/api",
  // 請求前的數據處理
  transformRequest: [function(data) {}],
  // 請求後的數據處理
  transformResponse: [function(data) {}],
  // 自定義的請求頭
  headers: { "x-Requested-With": "XMLHttpRequest" },
  // URL查詢對象
  params: { id: 12 },
  // 查詢對象序列化函數
  paramsSerializer: function(params) {},
  // request body
  data: { key: "aa" },
  // 超時設置s
  timeout: 1000,
  // 跨域是否帶Token
  withCredentials: false,
  // 自定義請求處理
  adapter: function(resolve, reject, config) {},
  // 身份驗證信息
  auth: { uname: "", pwd: "12" },
  // 響應的數據格式 json / blob /document /arraybuffer / text / stream
  responseType: "json",
  // xsrf 設置
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-XSRF-TOKEN",

  // 下傳和下載進度回調
  onUploadProgress: function(progressEvent) {
    Math.round(progressEvent.loaded * 100 / progressEvent.total);
  },
  onDownloadProgress: function(progressEvent) {},

  // 最多轉發數，用於node.js
  maxRedirects: 5,
  // 最大響應數據大小
  maxContentLength: 2000,
  // 自定義錯誤狀態碼範圍
  validateStatus: function(status) {
    return status >= 200 && status < 300;
  },
  // 用於node.js
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 用於設置跨域請求代理
  proxy: {
    host: "127.0.0.1",
    port: 8080,
    auth: {
      username: "aa",
      password: "2123"
    }
  },
  // 用於取消請求
  cancelToken: new CancelToken(function(cancel) {})
};

複製代碼