vue axios 拦截器

Posted 2022-08-04 lihengbin

前言

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

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

正文

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