vue-axios中加了拦截器heder中加token,实现个别api不加
前言:由于整体项目是后端管理界面和用户首页界面集成在一起,然而前端首页不需要用户登录,所以它的请求herder是不用加token,此篇记录实现。实现思路:在axios拦截器中获取当前的api,将不需要添加token的api存储到一个数组中,将其遍历比较。// request拦截器// 不加token的apiconst exceptUrls = ['xxx','xxx','xxx']service.
·
前言:由于整体项目是后端管理界面和用户首页界面集成在一起,然而前端首页不需要用户登录,所以它的请求herder是不用加token,此篇记录实现。
第一种实现思路:
在axios拦截器中获取当前的api,将不需要添加token的api存储到一个数组中,将其遍历比较。
// request拦截器
// 不加token的api
const exceptUrls = ['xxx','xxx','xxx']
service.interceptors.request.use(config => {
if (getToken() && !isToken && exceptUrls.indexOf(config.url) ===-1) {
config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
第二种实现思路:
在api中添加一个参数,参数带着Boolean类型的标识,然后在axios拦截器中获取进行判断。
api
export function xxx(data) {
return request({
url: 'xxx',
method: 'post',
headers: {'isToken': false},
data
})
}
axios拦截器
// request拦截器
service.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken ) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
对比两种方法,第一种可以实现具体api请求拦截,例如:
字典中有些请求不需要token,有的需要token,这时候可以使用第一种方式实现。
更多推荐
已为社区贡献1条内容
所有评论(0)