vue添加全局拦截器

Vue使用axios全局拦截器处理登录过期

最新推荐文章于 2025-05-07 19:59:53 发布

原创最新推荐文章于 2025-05-07 19:59:53 发布 · 4.4k 阅读

4 ·

CC 4.0 BY-SA版权

vue学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用axios设置全局拦截器，主要用于处理请求错误和登录状态过期的情况。通过安装axios，创建axiosConfig.js配置文件，然后在main.js中引入并设置别名，实现当请求发生错误特别是登录过期时，自动跳转到登录页面。

vue添加全局拦截器

为了统一处理错误及配置请求信息可以设置拦截器，本文是登录过期设置，过期后跳到登录页

安装 axios , 命令： npm install axios --save-dev
在src目录的新建config文件夹，并在config目录下新建文件 axiosConfig.js ，内容如下


import axios from 'axios'
import { Message } from 'element-ui'//引用elementui的信息提示框，根据个人选择可以不用
import Router from '../router'

// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config
}, function (error) {
// Do something with request error
Message.error({
message: '请求错误：' + error.message
})
return Promise.reject(error)
})

// Add a response interceptor
axios.interceptors.response.use(function (response) {
// console.log('response')
// Do something with response data
// console.log(response)
//返回参数是noLogin时，返回首页
if (response.data.flag === 'noLogin') {
Router.push('/')
Message.error({
message: '当前会话过期'
})
}
return response
}, function (error) {
// Do something with response error
let msg = error.message
if (error.response.status === 401) {
msg = '当前会话已过期。'
Router.push('/')
}
Message.error({
message: '响应错误：' + msg
})
return Promise.reject(error)
})
export default axios

3、 在main.js中进行引用，并配置一个别名来进行调用

import Axios from '@/config/axiosConfig'

Vue.prototype.$http = Axios

4、post请求格式

this.$http.post(url).then(res=>{
    console.log(res)
    }).catch(res=>{
 console.log(res)
})