vue+axios 前端实现的常用拦截的代码示例


Posted in Javascript onAugust 23, 2018

Axios拦截器配置

main.js

//定义一个请求拦截器
Axios.interceptors.request.use(function(config){
 store.state.isShow=true; //在请求发出之前进行一些操作
 return config
})
//定义一个响应拦截器
Axios.interceptors.response.use(function(config){
 store.state.isShow=false;//在这里对返回的数据进行处理
 return config
})

分别定义一个请求拦截器(请求开始时执行某些操作)、响应拦截器(接受到数据后执行某些操作),之间分别设置拦截时执行的操作,改变state内isShow的布尔值从而控制loading组件在触发请求数据开始时显示loading,返回数据时隐藏loading
特别注意:这里有一个语法坑(我可是来来回回踩了不少次)main.js中调取、操作vuex state中的数据不同于组件中的this.$store.state,而是直接store.state 同上面代码

一、路由拦截使用

router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
  if (store.state.token) { // 通过vuex state获取当前的token是否存在
   next();
  }
  else {
   next({
    path: '/login',
    query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
   })
  }
 }
 else {
  next();
 }
})

二、拦截器使用

要想统一处理所有http请求和响应,就得用上 axios 的拦截器。通过配置http response inteceptor,当后端接口返回401 Unauthorized(未授权),让用户重新登录。

// http request 拦截器
axios.interceptors.request.use(
 config => {
  if (store.state.token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
   config.headers.Authorization = `token ${store.state.token}`;
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 });
 
// http response 拦截器
axios.interceptors.response.use(
 response => {
  return response;
 },
 error => {
  if (error.response) {
   switch (error.response.status) {
    case 401:
     // 返回 401 清除token信息并跳转到登录页面
     store.commit(types.LOGOUT);
     router.replace({
      path: 'login',
      query: {redirect: router.currentRoute.fullPath}
     })
   }
  }
  return Promise.reject(error.response.data) // 返回接口返回的错误信息
 });

三、实例

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
 // element ui Loading方法
 loadinginstace = Loading.service({ fullscreen: true })
 return config
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载超时'
 })
 return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
 loadinginstace.close()
 return data
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载失败'
 })
 return Promise.reject(error)
})
 
export default axios

 如果你是使用了vux,那么在main.js这样使用:

Vue.prototype.$http.interceptors.response.use()

参考地址:vue中axios解决跨域问题和拦截器使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 #Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 #Javascript
React key值的作用和使用详解
Aug 23 #Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 #Javascript
从零开始学习搭建React脚手架项目
Aug 23 #Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 #Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 #Javascript
You might like
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python中那些 Pythonic的写法详解
2019/07/02 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
Java基础知识面试要点
2016/07/29 面试题
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
医生进修自我鉴定
2014/01/19 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
CAD实训总结范文
2015/08/03 职场文书