将firebase访问令牌传递给axios拦截器中的后端答案

【问题标题】：Pass firebase access token to backend in axios interceptor将firebase访问令牌传递给axios拦截器中的后端
【发布时间】：2021-09-01 16:34:32
【问题描述】：

我需要一些帮助来了解如何通过我的 api 请求将 firebase 不记名/jwt 令牌传递到后端。

我正在使用 axios 并使用拦截器来设置与此类似的不记名令牌

 axios.interceptors.request.use(
config => {
  const userData = store.getters['firebaseAuth/user']
  
  if (userData && userData.accessToken) {
    config.headers['Authorization'] = 'Bearer ' + userData.accessToken
  }

在所有firebase auth的例子中，我看到获取jwt令牌的方法是这样的：

 firebase
  .auth()
  .currentUser.getIdToken(/* forceRefresh */ true)
  .then(idToken => {

在我的拦截器中运行它以获取访问令牌是否是一种好习惯？..

对于向我的后端服务器发出的每个请求，感觉就像是对 firebase 服务器的不必要的额外 api 调用。

当令牌作为user 对象的属性可用时，我也很难理解为什么我什至应该使用这个firebase 方法(getIdToken)。它有一个奇怪的名字“za”，我认为这是从 firebase 故意的，并且没有提到使用它来获取 id/bearer/access 令牌。

 firebase.auth().onAuthStateChanged(user => {
  if (user) {
//user.za  id the id/bearer/access token

我最初的想法是将 user.za 存储在 localstorage 中，然后从拦截器的本地存储中获取它。

【问题讨论】：

标签： javascript firebase firebase-authentication axios

【解决方案1】：

我不确定这是否是最好的方法，但我最终直接在我的拦截器中使用了 Firebase SDK 方法。我对getIdToken API 的理解是，promise 返回一个缓存的 JWT，除非它过期，在这种情况下它会返回一个新的。我将拦截器函数设为异步，并使用await同步请求令牌。

axios.interceptors.request.use(
async function (request) {
  const user = currentUser();

  if (user) {
    try {
      const token = await user.getIdToken(false); // Force refresh is false
      request.headers["Authorization"] = "Bearer " + token;
    } catch (error) {
      console.log("Error obtaining auth token in interceptor, ", error);
    }
  }

  return request;
},...

【讨论】：