如何在 redux 中使用 Auth0 JWT 访问 API？答案

【问题标题】：How to access API with Auth0 JWT in redux?如何在 redux 中使用 Auth0 JWT 访问 API？
【发布时间】：2021-12-07 03:12:12
【问题描述】：

我正在使用 Auth0 通过 JWT 保护我的 API 端点。 “useAuth0().getTokenSilently()”是一个上下文钩子，它抛出“错误：无效的钩子调用”，因为我在 js 文件而不是 React 组件中调用它；我不确定如何解决这个问题。任何建议将不胜感激。 :)

// Actions.js

export const fetchIssues = () => async (dispatch) => {

  try {
    const token = await useAuth0().getTokenSilently(); // this line is throwing the error.

    const response = await api.get("issues", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    const responseData = await response.json();

    dispatch({ type: FETCH_ISSUES, payload: responseData });
  } catch (error) {
    console.log(error);
  }
};

【问题讨论】：

标签： reactjs authentication redux auth0

【解决方案1】：

Hooks 只能在函数组件的主体内部调用。这个钩子需要一个父组件，该组件有一个封装的提供者来提供 getTokenSilently() 的上下文。

因此，无论您想在何处使用 useAuth0()，都必须确保该组件是 Auth0Provider 的子组件。

我目前通过调用 getTokenSilently 来使用它，然后我直接将其设置为 axios 的标头，而无需为我的 API 进行 redux。

如果您确实有办法以独立方法编写此代码，请告诉我，因为我也有兴趣以单独方法编写此代码。

【讨论】：

【解决方案2】：

要在 React 函数组件之外使用 Auth0，您可以使用 Auth0-js client lib 以不受 React 包装器的约束，并且能够在函数组件之外工作。

潜在的缺点是您必须实现 React 包装器之前为您处理的行为。尝试是在使用您自己的 Auth0 实例的同时继续使用 React 包装器。如果您在每次实例更新时不严格保持它们之间的同步，这可能会导致状态和配置出现问题。

【讨论】：