// 通用接口调用文件
import request from 'axios'
// 引入 vuex
import store from '@/store'
// 引入 vue-router
import router from '@/router'
// 定义基地址
export const baseURL = ''
// 创建一个独立的实例对象
const axios = request.create({
baseURL: baseURL
})
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在 vuex 中获取用户的身份认证(token)
const token = store.state.user.profile.token
// 通过 token 判断用户当前是否已经登录
// 如用户已登录 --> 在请求头中添加对应的身份认证(token)
if (token) config.headers.Authorization = `Bearer ${token}`
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
res => {
// 数据脱壳
return res.data
},
error => {
// 判断用户身份认证是否过期
// 如已过期 --> 跳回登录页并终止当前方法
if (error.response && error.response.status === 401) return router.push('/login')
return Promise.reject(error)
}
)
// 默认导出封装的 ajax 请求方法
export default options => {
return axios({
method: options.method || 'GET',
url: options.url,
[options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
})
}
Vue中基于axios的 请求通用模块封装 基本思路
最新推荐文章于 2023-09-22 23:15:48 发布