vue axios 拦截器

前言

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

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

正文

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则是系统错误(这些状态码不是Status)

// 拦截器,当返回状态码是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拦截不到  查看原因

  mian.js中使用Elenent-ui    查看

原文地址:https://www.cnblogs.com/lihengbin/p/11376738.html

时间: 2024-10-09 16:49:42

vue axios 拦截器的相关文章

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

在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... }) router.beforeEach(

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

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

Axios拦截器配置

Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 此时要是验证符合条件则通过,否则不符合的不给通过 具体代码如下: html文件 option2.php文件 因为博客园不支持上传js文件 只能截图了 至此,就可以看到结果了,就可以看到控制台的打印信息 原文地址:https://www.cnblogs.com/ddlove/p/9957087.ht

axios拦截器+mockjs

//main.js中 //引入你mock.js文件 require('./mock.js') //封装api请求 //src/axios/api.js import axios from 'axios' import vue from 'vue' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // 请求拦截器 axios.interceptors.request.use(func

axios拦截器?

// 引入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方

axios拦截器使用方法

vue中axios获取后端接口数据有时候需要在请求开始时显示loading,请求结束后隐藏loading,这时候到每次调接口时都写上有点繁琐,有时候还会漏写. 这时候axios的拦截器就起了作用,我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤.定义拦截器如下: import Vue from 'vue' import axios from 'axios' import { Indicator } from 'mint-ui' import { Toast } from 'min

vue 路由拦截器和请求拦截器

vue 拦截器 路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('token')){ next(); }else{ alert('请重新登录'); next('/login'); } }) 请求拦截器 当发送请求时才会触发此功能 axios.interceptors.request.use(function (config) { let token = wi

axios拦截器

import axios from "axios"; axios.interceptors.response.use(response => { //=>设置响应拦截器,在AJAX请求成功,执行对应方法之前,把从服务器获取的RESULT(包含了响应主体和响应头等很多信息)中的DATA获取到然后返回,这样在请求成功执行的函数中,再次遇到的RESULT只有响应主体内容 return response.data; }); export{ axios } 没设置之前 返回的data

vue router拦截器的简单使用

之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过还是感觉router拦截器比较省事. router拦截器就是在路由跳转前后,做一些事情,相当于一个钩子函数. 下面说一下使用方法: 1.在main.js里  引入router import router from "./router/router"; 2.要在 vue实例前写入 //注册一