如何从React with Firebase Auth向Expressjs发送身份验证令牌

Question

您好，我正在尝试使用React、Express和Firebase创建一个具有身份验证的项目。在创建身份验证的过程中，我不知道为什么这种发送身份验证令牌的方式对我不起作用

import axios from 'axios'
import { auth } from '../firebase/firebase'

var config = {
   baseURL: "http://127.0.0.1:5000/",
   timeout: 5000,
}
auth.onAuthStateChanged(user => {
   user.getIdToken(true)
      .then((token) => {
         // I have tried this too, unfortunately same results
         // axios.defaults.headers.common['Authorization'] = `Bearer ${token}`

         config.headers = {
            authorization: token
         }
      })
      .catch(err => {
         console.log(err)
      })
})

console.log(config)
export default axios.create(config)
当我检查控制台中配置的值时，我得到的是：
      {
         "baseURL": "http://127.0.0.1:5000/",
         "timeout": 5000,
         "headers": {
             "authorization": "##AUTH TOKEN HERE##"
         }
     }
   
然而，当我检查我的req.headers在我的快递应用程序，这是我得到的：
      {
         host: '127.0.0.1:5000',
         connection: 'keep-alive',
         'sec-ch-ua': '"Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"',
         accept: 'application/json, text/plain, */*',
         'sec-ch-ua-mobile': '?0',
         'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36',      
         origin: 'http://localhost:3000',
         'sec-fetch-site': 'cross-site',
         'sec-fetch-mode': 'cors',
         'sec-fetch-dest': 'empty',
         referer: 'http://localhost:3000/',
         'accept-encoding': 'gzip, deflate, br',
         'accept-language': 'en-US,en;q=0.9',
         'if-none-match': 'W/"770-rnaTbTjcnfFuL5mkxjLb7fT1wEU"'
       }
   
如果有任何方法可以使用我使用的工具向后端发送身份验证令牌，请告诉我。任何帮助将不胜感激。
                

Answer 1

正如@Doug所提到的，Firebase API是异步的，因此您的API请求很有可能在获得ID令牌之前运行。相反，我建议在调用API的函数中获取ID Token，如下所示：

asnyc function callMyAPI() {
  const token = await firebase.auth().currentUser.getIdToken()
  // Write Axios Request here
  // Add the authorization header here
}