码迷,mamicode.com
首页 > 移动开发 > 详细

vue axios 拦截器

时间:2019-08-19 17:32:57      阅读:762      评论:0      收藏:0      [点我收藏+]

标签:tor   tps   font   res   prototype   kick   prot   inter   lse   

前言

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

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

正文

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    查看

 

vue axios 拦截器

标签:tor   tps   font   res   prototype   kick   prot   inter   lse   

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

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!