У меня есть приложение для реагирования, настроенное с Auth0
Когда анонимный пользователь напрямую переходит на защищенную страницу
http://localhost:3000/appname/ProtectedPage
код внизу моего компонента (Auth0 предоставляет библиотеку)
export default withAuthenticationRequired(ProtectedPage , {
// Show a message while the user waits to be redirected to the login page.
onRedirecting: () => (<div>Redirecting you to the login page...</div>),
});
перенаправляет пользователя на страницу входа Auth0
При успешном входе в систему пользователь перенаправляется обратно на авторизованный URL-адрес перенаправления (http://localhost: 3000 / appname)
Библиотека auth0 передает состояние обратно, и исходный URL-адрес загружается в браузер.
URL-адрес в этой точке выглядит как
http://localhost:3000/appname?code=asdasdadasdadasd
после этого исходный URL-адрес извлекается из состояния и приложение перенаправляет на желаемую страницу
http://localhost/appname/ProtectedPage
Это то, что я хочу до сих пор.
Проблема в том, что у меня есть BrowserRouter, который отображает исходный ответ на
http://localhost:3000/appname?code=asdasdadasdadasd
Это отображает HomeComponent
Немного больше информации
У меня есть два компонента
Первый компонент содержит BrowserRouter
и имеет этот эффект * 1 035 *
useEffect(() => {
console.log(`Called useEffect from FI ${window.location.pathname}`);
}, [window.location.pathname]);
Второй компонент (компонент меню) отображается в BrowserRouter, но до переключения, и имеет этот useEffect
useEffect(() => {
const path = window.location.pathname;
console.log(`Called useEffect from FMH ${path}`);
setActiveItem(path);
}, [window.location.pathname]);
Я также использовал DebugRouter, чтобы попытаться отрендерить еще сведения из маршрутизатора браузера
при перенаправлении с idp я получаю следующие выходные данные консоли:
initial history is: {
"length": 26,
"action": "POP",
"location": {
"pathname": "/appname",
"search": "?code=12345&state=iamastate",
"hash": ""
}
}
VM188 main.chunk.js:500 Called useEffect from FMH /appname
VM188 main.chunk.js:173 Called useEffect from FI /appname
VM188 main.chunk.js:500 Called useEffect from FMH /appname/ProtectedPage
Опять ProtectedPage изменяется, но BrowserRouter не отображает правильный компонент
I думаю, что жизненный цикл кажется
Redirect received /appname?code
BrowserRouter begings rendering
Url is changed by auth component
Menu component renders and sees the changed url
Browser Router finishes rendering with original url
Возможно, useEffect должен реагировать на изменение из auth lib, но опять же не уверен, как его поймать
React-newb ie еще раз спасибо