如何使用 firebase 並在 axios 攔截器中傳遞 idToken 在 reactjs 中處理令牌過期？

Question

我正在嘗試將 firebase 登錄集成到我的反應項目中，同時將 idtoken 傳遞到 Axios 攔截器以用於 API 消耗。

但我注意到我的 idtoken 已過期，並且相同的舊令牌被傳遞到我的 API 中。

如何刷新令牌並將新令牌傳遞到我的 Axios 攔截器？

以下是我的代碼：

import React, { Component } from "react";
import Navigation from "./Navigation";
import firebase from "./firebaseApp";
import axios from "axios";

import "./index.css";
class App extends Component {
  state = {
    authenticated: undefined,
  };
  componentDidMount() {
    firebase.auth().onAuthStateChanged((authenticated) => {
      if (authenticated) {
        let idTokenfinal;
        firebase
          .auth()
          .currentUser.getIdToken()
          .then((idToken) => {
            idTokenfinal = idToken;

            this.setState({
              authenticated: true,
            });
          })
          .catch((e) => {
            alert(e);
          });
        firebase.auth().onIdTokenChanged(function (user) {
          if (user) {
            // User is signed in or token was refreshed.
            user.getIdToken().then((idToken) => {

              idTokenfinal = idToken;

            });
          }
        });
        axios.interceptors.request.use(
          (config) => {
            if (config.data && config.data.authToken) {
              config.data.authToken = idTokenfinal;
            }
            return Promise.resolve(config);
          },
          function (error) {
            // Do something with request error
            return Promise.reject(error);
          }
        );
      } else {
        this.setState({
          authenticated: false,
        });
      }
    });
  }
  render() {
   return this.state.authenticated !== undefined &&
      this.state.authenticated !== null ? (
      <Navigation authenticated={this.state.authenticated} />
    ) : (
      <div className="loader"></div>
    );
  }
}
export default App;

Answer 1

與onAuthStateChanged類似， onIdTokenChanged會在刷新時為您提供一個新的 ID 令牌。 該刷新每小時自動發生一次。 如果您在這里有一個偵聽器，則無需每次都調用getIdToken - 只需使用提供給 ID 令牌偵聽器的最后一個值。

如果出於某種原因不想使用偵聽器，則可以調用getIdToken(true)每次刷新令牌，但這會增加每次調用的開銷。 最好使用監聽器提供的值。