0

我目前有一个反应功能组件，它使用 ReactiveSearch 搜索弹性搜索索引。Elasticsearch 位于一个代理之后，该代理负责使用 Auth0 进行身份验证。

基于此，我需要Authorization在每个弹性搜索请求中发送一个额外的标头。

我有以下钩子，它负责从 auth0 检索 idToken：

const useIdToken = (): { idToken: IdToken | undefined, isDone: boolean } => {
  const [idToken, setIdToken] = useState<IdToken>();
  const [isDone, setIdDone] = useState<boolean>(false)

  const {
    isLoading,
    isAuthenticated,
    getIdTokenClaims,
  } = useAuth0();

  useEffect(() => {
    console.log('auth0 is autenticated: ' + isAuthenticated + " is loading: " + isLoading)
    const getIdToken = async () => {
      const res = await getIdTokenClaims();

      setIdToken({
        ...res,
      });
      setIdDone(true)
    };

    getIdToken();
  }, [isLoading, isAuthenticated]);

  return {
    idToken,
    isDone,
  };
};

export default useIdToken;

然后我使用 ReactiveSearch 的功能组件执行以下操作：

const SearchPage = () => {
  const { idToken, isDone } = useIdToken();


  return (
    <MainLayout>
      {
        isDone && <ReactiveBase
          app=“Index"
          url="http://192.168.2.108:9200"
          headers={{
            Authorization: `Bearer ${idToken?.__raw}`
          }}
        >
          /// ReactiveSearch components
        </ReactiveBase>
      }
    </MainLayout>

  );

};

export default SearchPage;

这样做的结果是正在发送 Authorization 标头，因为Bearer undefined当钩子中的状态发生变化时，组件似乎没有刷新。

相同的钩子useIdToken被用于另一个功能组件并且它按预期工作。

我不确定我是否做错了什么，或者是否是 ReactiveBase 组件对钩子中的状态更改没有反应useIdToken。

4

0 回答 0