VueJS2 HTTP拦截器内异步调用Firebase getIdToken设置请求头不生效如何解决

问题原因 #

你遇到的问题本质是Vue.http（vue-resource）的拦截器默认不会等待异步逻辑执行完成，你原来的写法中getIdToken()是异步方法，其回调里的请求头设置和next()调用触发时，请求已经被提前发送出去，因此头没有携带成功。

解决方案 #

直接将拦截器逻辑改造为异步即可，vue-resource支持拦截器处理函数返回Promise/使用async/await，会等待异步逻辑执行完成后再发送请求：

写法1：async/await （推荐，可读性更高） #

Vue.http.interceptors.push(async (request, next) => {
  // 边界处理：Firebase初始化未完成/用户未登录时currentUser为null
  if (!auth.currentUser) {
    next()
    return
  }
  try {
    const token = await auth.currentUser.getIdToken()
    // 常规OAuth2规范需要加Bearer前缀，若你的后端无特殊要求可直接传token
    request.headers.set("Authorization", `Bearer ${token}`)
    request.headers.set("Accept", "application/json")
    next()
  } catch (err) {
    console.log('获取ID Token失败', err)
    // 可在此处添加未登录跳转逻辑
    next()
  }
})

写法2：原生Promise （兼容不支持async/await的环境） #

Vue.http.interceptors.push((request, next) => {
  if (!auth.currentUser) {
    next()
    return Promise.resolve()
  }
  return auth.currentUser.getIdToken()
    .then(token => {
      request.headers.set("Authorization", `Bearer ${token}`)
      request.headers.set("Accept", "application/json")
      next()
    })
    .catch(err => {
      console.log('获取ID Token失败', err)
      next()
    })
})

注意事项 #

• 一定要做auth.currentUser的非空判断，避免Firebase未初始化完成、用户未登录场景下的报错
• 大部分后端的权限校验逻辑会要求Authorization头遵循Bearer {token}的格式，如果你的后端解析不到token可以先检查是否缺少前缀

内容的提问来源于stack exchange，提问作者UmbrellaCorpAgent