Vue中axios的封装(报错、鉴权、跳转、拦截、提示)

  • 时间:
  • 浏览:18
  • 同一捕捉接心报错
  • 弹窗提醒
  • 报错重定背
  • 根底鉴权
  • 表单序列化

真现的功用

  • 同一捕捉接心报错 : 用的axios内置的阻拦器
  • 弹窗提醒: 引进 Element UI 的 Message 组件
  • 报错重定背: 路由钩子
  • 根底鉴权: 办事端过时工夫戳战token,借有借助路由的钩子
  • 表单序列化: 我那边间接用 qs (npm模块),您偶然间也能够本身写

用法及启拆

用法

// 办事层 , 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⑻"
 }
});
//POST传参序列化(增加要求阻拦器)
Axios.interceptors.request.use(
 config => {
  // 正在收收要求之前做某件事
  if (
   config.method === "post"
  ) {
   // 序列化
   config.data = qs.stringify(config.data);
   // 温馨提醒,如果贵公司的提交能间接承受json 格局,能够不消 qs 去序列化的
  }
  // 如果有做鉴权token , 便给头部带上token
  // 如果需求跨站面,寄存到 cookie 会好1面,限定也出那末多,有些阅读情况限定了 localstorage 的利用
  // 那里localStorage1般是要求胜利后我们自止写进到当地的,由于您放正在vuex革新便出了
  // 1些需要的数据写进当地,劣先从当地读与
  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 => {
  // 用户登录的时分会拿到1个根底疑息,好比用户名,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 ,由于我做了1些毛病页里,以是城市指背对应的报错页里
    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的真例从头启拆成1个plugin ,便利 Vue.use(***x)
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);
// 请跳过那1段,看上面的
const router = new Router({
 hashbang: false,
 mode: "history",
 routes: [
  {
   path: "/",
   redirect: "/adver",
   component: layout,
   children: [
    ...customerManage,
    ...adManage,
    ...dataStat,
    ...putonManage,
    ...manager,
    ...logger
   ]
  },
  ...account,
  ...error
 ]
});
// 路由阻拦
// 好面记了申明,没有是一切版块皆需求鉴权的
// 以是需求鉴权,我城市正在路由meta增加增加1个字段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可设置装备摆设的1些选项,其他的详细看民网申明哈

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

总结

那个启拆虽然说没有是万金油版本,可是我觉得年夜多用axios连系vue的小火伴,略微改改皆能间接拿去用

鉴权需求再松散1些,好比token 能够遵守 JWT 的规格,和引进中心层nodejs(对传输的做阻拦启拆减解稀,散开接心);

以上所述是小编给各人引见的Vue中axios的启拆(报错、鉴权、跳转、阻拦、提醒),期望对各人有所帮忙,若是各人有任何疑问欢送给我留行,小编会实时复兴各人的!