Reactjs Auth0 getTokensilency返回未定义的
我使用的是react-auth-spa.jsxReactjs 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'
/* 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]);