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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
Angular2自定义分页组件
Apr 19 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
layui实现三级导航菜单
Jul 26 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
javascript canvas实现雨滴效果
Jun 09 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
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
代码生成器 document.write()
2007/04/15 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
django基础之数据库操作方法(详解)
2017/05/24 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python interpolate插值实例
2020/07/06 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
python在协程中增加任务实例操作
2021/02/28 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
PHP实现考试倒计时功能代码
2021/04/16 PHP