1.一般axios分为request请求拦截器和response响应拦截器两种
request请求拦截器：发送请求前统一处理，如：设置请求头headers
response响应拦截器：根据响应状态码进行下一步操作，如：登陆时token过期，接口返回401
2.axios安装及使用步骤
【1】安装axios
image.png
【2】在utils文件夹中创建axios.js文件并引入axios
image.png
【3】http request 请求拦截器
1 路由守卫
image.png
router.beforeEach((to, from, next) => { 登录时判断token是否存在
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!store.state.user.token) { //不存在返回登录页面
next({
name: 'login',
query: {
redirect: to.fullPath
}
})
} else {
next()
}
} else {
next()
}
})
2.request请求拦截
$axios.interceptors.request.use(
(config) => {
const { token } = store.state.user //获取token
if (token) { //判断有token(根据项目需求是否添加)
config.headers.Authorization = 'JWT ' + token
}
return config
},
(error) => {
return Promise.reject(error)
}
)
【4】http response响应拦截器
1.封装方法 (token不存在返回登录页)
function redirectLogin() {
router.push({
name: 'login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
2.返回状态码
$axios.interceptors.response.use(
(response) => {
return response
},
async (error) => {
if (error.response) {
const { status } = error.response
if (status == 400) {
ElMessage.error('请求参数错误')
} else if (status == 401) {
if (!store.state.user.token) {
redirectLogin() //调用方法跳到登录页
return Promise.reject(error)
}
redirectLogin();
} else if (status == 403) {
ElMessage.error('没有权限，请联系管理员')
} else if (status == 404) {
ElMessage.error('请求资源不存在');
router.push('/404')
} else if (status >= 500) {
ElMessage.error('服务端错误，请联系管理员')
} else if (error.request) {
ElMessage.error('请求超时，请刷新重试')
} else {
ElMessage.error(`请求失败:${error.message}`)
}
return Promise.reject(error)
}
}
)
3.整体代码如下
import Axios from 'axios'
import { ElMessage } from 'element-plus'
import store from '@/store'
import router from '@/router'
import { routeLocationKey } from 'vue-router'
const baseURL = 'http://192.168.1.219:8000';
const timeout = 2000;
const $axios = Axios.create({
baseURL,
timeout
})
function redirectLogin() {
router.push({
name: 'login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
$axios.interceptors.request.use(
(config) => {
const { token } = store.state.user
if (token) {
config.headers.Authorization = 'JWT ' + token
}
return config
},
(error) => {
return Promise.reject(error)
}
)
let isRfreshing = false
let requests = []
$axios.interceptors.response.use(
(response) => {
return response
},
async (error) => {
if (error.response) {
const { status } = error.response
if (status == 400) {
ElMessage.error('请求参数错误')
} else if (status == 401) {
if (!store.state.user.token) {
redirectLogin()
return Promise.reject(error)
}
redirectLogin();
} else if (status == 403) {
ElMessage.error('没有权限，请联系管理员')
} else if (status == 404) {
ElMessage.error('请求资源不存在');
router.push('/404')
} else if (status >= 500) {
ElMessage.error('服务端错误，请联系管理员')
} else if (error.request) {
ElMessage.error('请求超时，请刷新重试')
} else {
ElMessage.error(`请求失败:${error.message}`)
}
return Promise.reject(error)
}
}
)
export default $axios
ps:自己在项目中写的方法，有哪些不足的地方欢迎指点
