// 1.创建一个新的axios实例
// 2.请求拦截器 如果token进行头部携带
// 3.响应拦截器:1.剥离无效数据 2.处理token失效
// 4.导出一个函数,调佣当前的axios实例发请求,返回值promise
import axios from 'axios'
import store from '@/store'
import router from '@/router'
// 导出基准地址,原因 其他地方不是通过axios发请求的地方用上基准地址
export const baseURL = 'xxx.com'
const instance = axios.create({
// axios的一些配置 baseURL timeout
baseURL,
timrout:5000
})
instance.interceptors.request.use(config =>{
// 拦截业务逻辑
// 进行请求配置的修改
// 如果本地又token
// 1.获取用户信息对象
const { profile } = store.store.user
// 2.判断是否有token
if (profile.token) {
config.headers.Authorization = `Bearer ${profile.token}`
}
return config
},err => {
return Promise.reject(err)
})
// res=>res.data 取出data数据,将来调用接口的时候直接拿到后台数据
instance.interceptors.request.use(res => res.data, err => {
// 401 状态码 进入函数
if (err.response && err.response.status === 401) {
// 1.清空本地无效用户信息
// 2.跳转到登陆页面
// 3.跳转需要传参(当前路由地址)给登录页码
store.commit('xxx/方法',{})
// 当前路由地址
// 组件里头:$route.path $route.fullpath
// js模块中:roter.courrentRoute.value.fullpath 就是当前地址
const fullpath = encodeURIComponent(roter.courrentRoute.value.fullpath) //转码
// encodeURIComponent url转码 防止解析地址出现问题
router.push('./login?xx=' + fullpath)
}
return Promise.reject(err)
})
温故·axios请求拦截器和响应拦截器
刘听风
427
2022-07-05