前言:由于整体项目是后端管理界面和用户首页界面集成在一起,然而前端首页不需要用户登录,所以它的请求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,这时候可以使用第一种方式实现。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐