背景：后台接口返回code==501表示用户是未登录状态，需要登录才可访问；
main.js中通过http拦截做路由跳转
import Vue from 'vue' import Axios from 'axios' Vue.prototype.$axios = Axios import { Loading, Message, MessageBox } from 'element-ui' // 超时时间 Axios.defaults.timeout = 5000 // http请求拦截器 var loadinginstace Axios.interceptors.request.use(config => { config.headers.common ={ 'Content-Type': "application/x-www-form-urlencoded", 'Access-Control-Allow-Origin':'*', 'Access-Control-Allow-Headers':'X-Requested-With,Content-Type', 'Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS', 'user-id': library.getData("id")==undefined?'':library.getData("id") } // element ui Loading方法 loadinginstace = Loading.service({ fullscreen: true }) return config }, error => { loadinginstace.close(); Message.error({ message: '网络不给力,请稍后再试' }) return Promise.reject(error) }) //http响应拦截器 Axios.interceptors.response.use(data => { // 响应成功关闭loading loadinginstace.close(); const code = data.data.code; if(code == 501) { //未登录 MessageBox.alert('请先登录', '提示', { confirmButtonText: '确定', callback: action => { router.replace({ name: 'login', // query: {redirect: router.currentRoute.fullPath} //登录后再跳回此页面时要做的配置 }) } }); } return data }, error => { loadinginstace.close(); Message.error({ message: '网络不给力,请稍后再试' }) return Promise.reject(error) })解决vue axios的封装 请求状态的错误提示问题
Vue全局loading及错误提示的思路与实现
vue - axios 请求统一增加请求头
到此这篇VUE-axios统一增加请求头并根据接口返回的状态码判断用户登录状态并跳转登录页的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11239.html