Reactjs Auth0 getTokensilency返回未定义的

Reactjs Auth0 getTokensilency返回未定义的,reactjs,auth0,Reactjs,Auth0,我使用的是react-auth-spa.jsx /* eslint-disable react/require-default-props */ // src/react-auth0-spa.js import React, { useState, useEffect, useContext } from 'react'; import PropTypes from 'prop-types'; import createAuth0Client from '@auth0/auth0-spa-js'

我使用的是react-auth-spa.jsx

/* eslint-disable react/require-default-props */
// src/react-auth0-spa.js
import React, { useState, useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
import createAuth0Client from '@auth0/auth0-spa-js';

const DEFAULT_REDIRECT_CALLBACK = () => {
  window.history.replaceState({}, document.title, window.location.pathname);
};

export const Auth0Context = React.createContext();
export const useAuth0 = () => useContext(Auth0Context);

export const Auth0Provider = ({
  children,
  onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
  ...initOptions
}) => {
  const [isAuthenticated, setIsAuthenticated] = useState();
  const [user, setUser] = useState();
  const [auth0Client, setAuth0] = useState();
  const [loading, setLoading] = useState(true);
  const [popupOpen, setPopupOpen] = useState(false);

  useEffect(() => {
    const initAuth0 = async () => {
      const auth0FromHook = await createAuth0Client(initOptions);
      setAuth0(auth0FromHook);

      if (window.location.search.includes('code=')
          && window.location.search.includes('state=')) {
        const { appState } = await auth0FromHook.handleRedirectCallback();
        onRedirectCallback(appState);
      }

      const isAuth = await auth0FromHook.isAuthenticated();

      setIsAuthenticated(isAuth);

      if (isAuth) {
        const authedUser = await auth0FromHook.getUser();
        setUser(authedUser);
      }

      setLoading(false);
    };
    initAuth0();
    // eslint-disable-next-line
  }, []);

  const loginWithPopup = async (params = {}) => {
    setPopupOpen(true);
    try {
      await auth0Client.loginWithPopup(params);
    } catch (error) {
      console.error(error);
    } finally {
      setPopupOpen(false);
    }
    const authedUser = await auth0Client.getUser();
    setUser(authedUser);
    setIsAuthenticated(true);
  };

  const handleRedirectCallback = async () => {
    setLoading(true);
    await auth0Client.handleRedirectCallback();
    const authedUser = await auth0Client.getUser();
    setLoading(false);
    setIsAuthenticated(true);
    setUser(authedUser);
  };
  return (
    <Auth0Context.Provider
      value={{
        isAuthenticated,
        user,
        loading,
        popupOpen,
        loginWithPopup,
        handleRedirectCallback,
        getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
        loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
        getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),
        getTokenWithPopup: (...p) => auth0Client.getTokenWithPopup(...p),
        logout: (...p) => auth0Client.logout(...p),
      }}
    >
      {children}
    </Auth0Context.Provider>
  );
};

Auth0Provider.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
  onRedirectCallback: PropTypes.func,
};
(而isLoggedIn、onLogin和onLogout是redux使用的道具)。这样,我尝试在商店中注册令牌

然而,不管怎样,getTokensilency都会返回undefined,即使isAuthenticated和user都正常。我试着查了一下,但似乎什么也找不到


谢谢

当我遇到这个问题时,它变成了一个承诺问题,因为它是如何从Auth0返回给我的。所以在这个特殊的例子中,我会更深入地研究这个问题

const Navigation = (props) => {
  const {
    isAuthenticated, loginWithRedirect, logout, loading, user, getTokenSilently,
  } = useAuth0();

  const getToken = async () => {
    const { token } = await getTokenSilently();
    return token;
  };

  useEffect(() => {
    const { isLoggedIn, onLogout, onLogin } = props;
    if (!isLoggedIn && isAuthenticated && user) {
      if (!loading) {
        onLogin(user, getToken());
      }
    }
    if (isLoggedIn && !isAuthenticated) {
      onLogout(user);
    }
  }, [loading]);