项目场景:vue-axios中拦截器加了token 和其他字段,但是有的接口请求的时候不需要带token和其他字段,怎么操作?
问题描述:
提示:我做的是两套系统,一套系统目前做了鉴权处理,一套不带鉴权处理。现在要在带鉴权处理的系统,用不带鉴权处理系统的一个接口
例如:
APP 中接收数据代码:
import axios from 'axios'
axios.interceptors.request.use(
config => {
// 这里的config包含每次请求的内容
const token = window.localStorage.getItem('token')
const Mail = window.localStorage.getItem('Mail')
const password = window.localStorage.getItem('password')
if (token && Mail && password) {
config.headers.token = token
config.headers.username = Mail
config.headers.password = password
}
return config
},
err => {
console.error('api request 请求出错:', err)
return Promise.reject(err)
}
)
原因分析:
提示:这里填写问题的分析:这里可以看出,直接在axios上添加了拦截器。axios.interceptors.request.use,所以全局所有的axios都会加上拦截器,这就导致不需要拦截器里面添加字段的地方,会报错
例如:
解决方案:
提示:你不能直接在axios上添加拦截器啊,这是全局的,那该怎么办呢?
例如:你可以重新创建一个axiso,赋值,然后将这个axios暴露出去
import axios from 'axios'
const api = axios.create()
// api.defaults.baseURL = Config.baseUrl.locallhost
api.defaults.baseURL = Config.baseUrl.dev
api.interceptors.request.use(
config => {
// 这里的config包含每次请求的内容
const token = window.localStorage.getItem('token')
const Mail = window.localStorage.getItem('Mail')
const password = window.localStorage.getItem('password')
if (token && Mail && password) {
// 添加headers
config.headers.token = token
config.headers.username = Mail
config.headers.password = password
}
return config
},
err => {
console.error('api request 请求出错:', err)
return Promise.reject(err)
}
)
export default api
调用
在你需要的地方,进行到入即可
关键点
const api = axios.create()
// 创建一个新的axios
结束语
新创建一个axios的用处就是,拦截器需要加字段的地方,就加。不需要加,就用最开始的axios