身份验证无效后重定向。史无前例
Redirect After Authentication Not Working. No Path in History
使用 Auth0 登录后重定向在我的 React 应用程序中不起作用。我遵循了 official tutorial.
中的代码
window.location.pathname
仅将“/”推送到历史记录,从而在刷新页面时将我的主页重定向到我的主页。
appState
道具在我的代码中似乎总是未定义。 Auth0 似乎没有给它赋值。我错过了什么吗?
有人以前在 React 或 Auth0 中遇到过这个问题吗?
import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';
const Auth0ProviderWithHistory = ({ children }) => {
const history = useHistory();
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const audience = process.env.REACT_APP_AUDIENCE;
const onRedirectCallback = (appState) => {
history.push(appState?.returnTo || window.location.pathname);
};
return (
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
audience={audience}
>
{children}
</Auth0Provider>
);
};
export default Auth0ProviderWithHistory;
我的路由结构
import React from 'react';
import { BrowserRouter, withRouter } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import Auth0ProviderWithHistory from './Auth0ProviderWithHistory';
// Components
import Router from './Router';
import { Navbar, Footer } from './components/';
const NavbarWithRouter = withRouter(Navbar);
export default function App() {
return (
<>
<BrowserRouter>
<Auth0ProviderWithHistory>
<NavbarWithRouter />
<Router />
<Footer />
</Auth0ProviderWithHistory>
</BrowserRouter>
</>
);
}
我也遇到了同样的问题。在出现一些依赖性问题并更新 npm 包后,出现了这条奇怪的消息:
我在 auth0community 消息的帮助下解决了这个问题..https://community.auth0.com/t/redirecting-after-login/39821...提供:
const onRedirectCallback = appState => {
history.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.href = "https://www.exampleroute.com/pointofredirect"
);
};
使用 Auth0 登录后重定向在我的 React 应用程序中不起作用。我遵循了 official tutorial.
中的代码window.location.pathname
仅将“/”推送到历史记录,从而在刷新页面时将我的主页重定向到我的主页。
appState
道具在我的代码中似乎总是未定义。 Auth0 似乎没有给它赋值。我错过了什么吗?
有人以前在 React 或 Auth0 中遇到过这个问题吗?
import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';
const Auth0ProviderWithHistory = ({ children }) => {
const history = useHistory();
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const audience = process.env.REACT_APP_AUDIENCE;
const onRedirectCallback = (appState) => {
history.push(appState?.returnTo || window.location.pathname);
};
return (
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
audience={audience}
>
{children}
</Auth0Provider>
);
};
export default Auth0ProviderWithHistory;
我的路由结构
import React from 'react';
import { BrowserRouter, withRouter } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import Auth0ProviderWithHistory from './Auth0ProviderWithHistory';
// Components
import Router from './Router';
import { Navbar, Footer } from './components/';
const NavbarWithRouter = withRouter(Navbar);
export default function App() {
return (
<>
<BrowserRouter>
<Auth0ProviderWithHistory>
<NavbarWithRouter />
<Router />
<Footer />
</Auth0ProviderWithHistory>
</BrowserRouter>
</>
);
}
我也遇到了同样的问题。在出现一些依赖性问题并更新 npm 包后,出现了这条奇怪的消息:
我在 auth0community 消息的帮助下解决了这个问题..https://community.auth0.com/t/redirecting-after-login/39821...提供:
const onRedirectCallback = appState => {
history.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.href = "https://www.exampleroute.com/pointofredirect"
);
};