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


Posted in Javascript onAugust 20, 2019
  • 统一捕获接口报错
  • 弹窗提示
  • 报错重定向
  • 基础鉴权
  • 表单序列化

实现的功能

  • 统一捕获接口报错 : 用的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-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可配置的一些选项,其他的具体看官网说明哈

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的小伙伴,稍微改改都能直接拿来用

鉴权需要再严谨一些,比如token 可以遵循 JWT 的规格,以及引入中间层nodejs(对传输的做拦截封装加解密,聚合接口);

以上所述是小编给大家介绍的Vue中axios的封装(报错、鉴权、跳转、拦截、提示),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
Javascript事件实例详解
Nov 06 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Vue formData实现图片上传
Aug 20 #Javascript
Angular8 Http拦截器简单使用教程
Aug 20 #Javascript
vue实现axios图片上传功能
Aug 20 #Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 #Javascript
vue+element-ui+axios实现图片上传
Aug 20 #Javascript
vue element upload实现图片本地预览
Aug 20 #Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 #Javascript
You might like
PHP4与PHP5的时间格式问题
2008/02/17 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Django如何配置mysql数据库
2018/05/04 Python
在python中pandas的series合并方法
2018/11/12 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
安康杯竞赛活动总结
2014/05/05 职场文书
机关作风建设整改方案
2014/10/27 职场文书
学前班语言教学计划
2015/01/20 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python