前言
项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。
第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢。
正文
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