1.在utils中创建一个request.js文件
2.编写axios请求拦截器和响应拦截器
//拦截器
import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const BaseURL = 'http://big-event-vue-api-t.net'
//创建一个axios实例
const instance = axios.create({
BaseURL,
timeout: 100000
})
//1.请求拦截器
instance.interceptors.request.use(
(config) => {
//请求发送前的处理
const userStore = useUserStore()
if (userStore.token) {
config.headers.Authorization = userStore.token
}
return config
},
//错误处理
(err) => Promise.reject(err)
)
//响应拦截器
instance.interceptors.response.use(
(res) => {
if (res.data.code === 0) {
return res
}
ElMessage.error(res.data.message || '服务异常')
return Promise.reject(res.data)
},
(err) => {
ElMessage.error(err.response.data.message || '服务异常')
console.log(err)
if (err.response?.status === 401) {
router.push('/login')
}
return Promise.reject(err)
}
)
export default instance
export { BaseURL }