时间戳

首页 > 解决方案 > 将firebase访问令牌传递给axios拦截器中的后端

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

问题描述

我需要一些帮助来了解如何通过我的 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 中，然后从拦截器的本地存储中获取它。

标签： javascriptfirebasefirebase-authenticationaxios

解决方案

我不确定这是否是最好的方法，但我最终直接在我的拦截器中使用了 Firebase SDK 方法。我对getIdTokenAPI 的理解是，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;
},...

推荐阅读