При перенаправлении из Idp BrowserRouter не выполняет повторную визуализацию, когда предыдущий URL-адрес из состояния перенаправляется из перенаправления из IDP - PullRequest
1 голос
/ 11 июля 2020

У меня есть приложение для реагирования, настроенное с 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 еще раз спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...