如何使用firebase处理reactjs中的令牌过期并在axios拦截器中传递idToken？

Question

我正在尝试在我的 react 项目中集成 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) 来每次刷新令牌，但这会增加每次调用的开销。最好使用监听器提供的值。