Как выполнить аутентификацию с помощью React hooks и response-router - PullRequest
Новая
       4

Как выполнить аутентификацию с помощью React hooks и response-router

2 голосов
/ 26 марта 2019

Я пытаюсь аутентифицировать пользователя при каждом изменении маршрута с помощью react-router-dom и react hooks.Идея состоит в том, что каждый раз, когда пользователь перемещается к маршруту, система выполняет вызов API и аутентифицирует пользователя.Мне нужно добиться этого, потому что я использую react-redux, и при каждой перезагрузке окна состояние избыточности не сохраняется.Поэтому мне нужно снова установить isLoggedNow реквизит true: 

const PrivateRoute = ({
  component: Component,
  checkOnEachRoute: checkReq,
  isUserLogged,
  ...rest
}) => {
  const [isLoggedNow, setLogged] = useState(isUserLogged);
  useEffect(
    () => {
      const fetchStatus = async () => {
        try {
          await selectisUserLogged();
          setLogged(true);
        } catch (error) {
          console.log(error);
        }
      };
      fetchStatus();
    },
    [isUserLogged],
  );
  return (
    <Route
      {...rest}
      render={props =>
        isLoggedNow ? (
          <div>
            <Component {...props} />
          </div>
        ) : (
          <Redirect
            to={{
              pathname: '/login',
            }}
          />
        )
      }
    />
  );
};

Затем я бы использовал вышеприведенное PrivateRoute следующим образом: 

function App(props) {
  return (
    <div>
      <Switch location={props.location}>
        <Route exact path="/login" component={Login} />
        <PrivateRoute exact path="/sidebar" component={Sidebar} />
      </Switch>
    </div>
  );
}

Сначала isUserLogged is true, но после перезагрузки окна я получаю сообщение об ошибке Warning: Can't perform a React state update on an unmounted component. Итак, как мне этого добиться, чтобы при каждой перезагрузке окна я аутентифицировал пользователя?Я ищу какой-то componentWillMount.

1 Ответ

2 голосов
/ 14 мая 2019

Примерно так работает (где isUserLogged - реквизит из редукса): 

function PrivateRoute({ component: Component, isUserLogged, ...rest }) {
  const [isLoading, setLoading] = useState(true);
  const [isAuthenticated, setAuth] = useState(false);
  useEffect(() => {
    const fetchLogged = async () => {
      try {
        setLoading(true);
        const url = new URL(fetchUrl);
        const fetchedUrl = await fetchApi(url);
        setAuth(fetchedUrl.body.isAllowed);
        setLoading(false);
      } catch (error) {
        setLoading(false);
      }
    };
    fetchLogged();
  }, []);
  return (
    <Route
      {...rest}
      render={props =>
        // eslint-disable-next-line no-nested-ternary
        isUserLogged || isAuthenticated ? (
          <Component {...props} />
        ) : isLoading ? (
          <Spin size="large" />
        ) : (
          <Redirect
            to={{
              pathname: '/login',
            }}
          />
        )
      }
    />
  );
}
...