前言

项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。

第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢。

正文

axios的拦截器分为请求拦截器和响应拦截器两种。
我一般把拦截器写在main.js里。

mian.js
//axios请求
import Axios from "axios";
Vue.prototype.$axios = Axios;

请求拦截器

axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么,例如加入token
.......
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
)

响应拦截器

axios.interceptors.response.use(
function (response) {
// 在接收响应做些什么,例如跳转到登录页
......
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
)

这两种拦截器中我只用了响应拦截器,现在我就来说说我是如何使用的。

首先说明一下,这里的状态码不是status,而是后台包在data中的(无论是成功还是失败),返回409表示用户账户过期,退到登录页,返回302表示没有权限,返回-1则是系统错误

// 拦截器,当返回状态码是409,踢出到登录页面,但所有请求都是异步的,如果在某个地方有多个请求,拦截器就会拦截多遍,弹框也会弹多次,用户体验差,
// 所以当第一次拦截成功后,后面就不需要拦截,所以在这写了个操作,
// 操作:如果第一次拦截成功,在sessionStorage中存储个标识,然后下次拦截进来时判断有没有这个标识,如果有,则不进行拦截操作,当没有拦截时将这个标识从sessionStorage中删除
Axios.interceptors.response.use(
  // 成功
function(response) {
// 返回
// return response;
// alert(response.status) //成功的Status
if (response.data.code == "409"){
       var kickOut = sessionStorage.getItem("kickOut");
       if (kickOut == "1") {
         return;
       }
       sessionStorage.setItem("kickOut", "1");
       router.push("/");
       ElementUI.MessageBox(
         "账号已经在其他地方登录,请重新登录!",
         "警告",
         {
           confirmButtonText: "确定"
         }
       )
     } else if(response.data.code == "302"){
        ElementUI.Message({
     message: '没有权限!',
          type:'warning'
      });
     }else {
        sessionStorage.removeItem("kickOut");
        return response;
     }
   },
   // 失败
   function(error) {
// alert(error.response.status) //失败的Status
if (error.response.data.code == "409") {
...... //和成功中的一样,可以封装成一个函数在这调用
}else if(error.response.data.code == "-1"){
       ElementUI.Message({
     message: '系统错误!',
          type:'warning'
    })
}
}
);

注意:

  后台返回的status状态码302拦截不到,是因为浏览器自行根据redirectUrl进行了跳转 ,我这是后台写了个302接口,返回值中给我放的302,如图所示      

        

总结:

  以上就是本文的全部内容了,希望对遇到该问题的猿们有所帮助,也希望大家多多支持本码农,如有问题,请留言!

vue axios 拦截器的更多相关文章

  1. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  2. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  3. vue axios拦截器的封装

    // request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...

  4. vue axios拦截器介绍

    关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...

  5. vue axios拦截器加全局loading

    import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...

  6. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  7. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  8. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  9. axios拦截器搭配token使用

    在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...

随机推荐

  1. Java Interger类,两对整数明明完全一样,为何一个输出true,一个输出false

    package text; public class MethodOverload { public static void main(String[] args) { Integer i1=100; ...

  2. 170816-关于Java基础的习题

    1. switch 括号里的可以是 int .char. byte.short.String,还有枚举类型,应用举例 不可以是long.double 2. 调用ma()方法之后,ma()方法将错误类型 ...

  3. 如何将一个SpringBoot简便地打成一个war包(亲测有效)

    正常情况下SpringBoot项目是以jar包的形式,通过命令行: 来运行的,并且SpringBoot是内嵌Tomcat服务器,所以每次重新启动都是用的新的Tomcat服务器.正因如此,也出现了一个问 ...

  4. IBM Security App Scan Standard 工具的使用

    1.AppScan是什么? AppScan是IBM的一款web安全扫描工具,可以利用爬虫技术进行网站安全渗透测试,根据网站入口自动对网页链接进行安全扫描,扫描之后会提供扫描报告和修复建议等. AppS ...

  5. duliu题之狼抓兔子题解

    拖了将近5天的正解和AC.........emmmmm........... 事实告诉我们这种毒瘤题一定要建双向边(用了不知道多少个小时质疑建边的人欲哭无泪) 心态爆炸的传送 题了个面 这是个求最小割 ...

  6. qbzt day3 晚上 平衡树的一些思想

    pks大佬的blog 二叉查找树 任何一个节点左子树的所有元素都小于这个节点,右子树的所有元素都大于这个节点 查找一个节点:从根节点开始,比他小就向左走,比他大就向右走 平衡树:解决二叉查找树的一些痛 ...

  7. 【运维相关】MongoDB那些坑

    前言 某个早期技术债务项目线上有一个mongoDB服务,用途很简单,存一些文件而已.不过用户那边突然报个bug说上边的图片丢失了,起初没当回事认为是代码遇到错了,直到后来看了用户详细的bug复现后,登 ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_5_综合案例_文件搜索

    复制上一节课的代码 这三种方式都可以获取到文件的名称 把目录的打印注释掉 如果把文件的后缀改成大写的JAVA 再获取就获取不到了 文件名或者路径 转换为小写的字符串 链式编程

  9. 测开之路九十五:css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  10. package__init__用途

    baidu包,假设在baidu包下有N个模块,分别是baidu1.py.baidu2.py,baidu3.py, baiduHq.py(baidu1.py,baidu2.py,baidu3.py模块代 ...