Каков наилучший способ перенаправить пользователя на страницу только при соблюдении определенных условий?

Question

Я использую React для своего SPA. Я знаю, как работает Routes, и я знаю, как сделать PrivateRoute.

. Проблема в том, что мне нужно подтвердить личность моих пользователей, прежде чем они смогут использовать PrivateRoute. Я попытался реализовать это так:

function PrivateRoute({ component: Component, ...rest }) {
    return (
        <Route
            {...rest}
            render={props => {
                if (isAuthenticated()) {
                    if (isVerified()) {
                        return <Component {...props} />;
                    } else if (isInProcess()) {
                        // replace url and render verification component
                        history.push("/inverification");
                    } else {
                        // replace url and render document upload
                        history.push("/documentupload");
                        return <DocumentUpload />;
                    }
                } else {
                    return (
                        <Redirect
                            to={{
                                pathname: "/login",
                                state: { from: props.location }
                            }}
                        />
                    );
                }
            }}
        />
    );
}

export default function Routes() {
    // manage mobile drawer
    const [drawer, setDrawer] = useState(false);

    return (
        <Suspense fallback={<Loader />}>
            <Router history={history}>
                <div className="root-div">
                    <Navbar setDrawer={setDrawer} />
                    <Drawer drawer={drawer} setDrawer={setDrawer} />
                    <div className="content-div">
                        <Switch>
                            <Route exact path="/" component={Main} />
                            <Route exact path="/login" component={Login} />
                            <Route
                                path="/login/callback"
                                component={Callback}
                            />
                            <PrivateRoute path="/signup" component={Signup} />
                            <Route path="/logout" component={Logout} />
                            <PrivateRoute
                                path="/test"
                                component={() => <h1>Success</h1>}
                            />
                        </Switch>
                    </div>
                    <Footer />
                </div>
            </Router>
        </Suspense>
    );
}

Поэтому, входя в систему, я сохраняю повара ie с некоторой информацией о моем пользователе, закодированной в JWT токене.

isVerified() и isInProcess() проверяют, может ли пользователь уже использовать PrivateRoute. Если isVerified() равно true, он может перейти к компоненту, иначе он проверяет, находится ли пользователь в процессе проверки.

Что мне нужно сделать, это:

1. Сразу после регистрации пользователя форма сохраняет информацию о пользователе и pu sh историю в /documentupload. Мне нужно, чтобы этот компонент отображался ТОЛЬКО, если isVerified() и isInProcess() имеют значение false.

2. Если пользователь уже представил свои документы, а isInProcess() имеет значение true, то мне нужно сделать пу * От 1057 * до /inverification и визуализировать другой компонент, но ТОЛЬКО если isInProcess() истинно и isVerified() ложно.

3. Для обоих вышеупомянутых случаев isAuthenticated() должно быть истинно .

Способ, который я реализовал, не работает, вместо рендеринга компонента <DocumentUpload /> отображается пустая страница.

Мой вопрос: как лучше? чтобы достичь того, что мне нужно?

Я думаю, что создание другой функции, такой как function DocumentUploadVerification, похожей на функцию PrivateRoute, - это способ, но я думаю, что это будет слишком многословно, и, возможно, найдется лучший способ чтобы решить ее.

Что вы думаете?

Заранее спасибо!

Answer 1

Когда вы делаете:

history.push("/documentupload");
return <DocumentUpload />;

, вы переключаетесь на маршрут / documentupload, который не существует в вашем компоненте Routes, и именно по этой причине вы видите пустую страницу. Что бы я сделал:

В маршрутах добавьте новую запись:

<PrivateRoute path="/documentupload" component={DocumentUpload} />

и удалите возврат из PrivateRoute. Таким образом DocumentUpload будет «защищен» + history.pu sh избавит вас от проблемы рекурсии, поскольку, когда вы попытаетесь выбрать sh местоположение, в котором вы уже находитесь, оно просто проигнорирует его (если вам не нравится предупреждение, вы всегда можете добавить проверку, если вы уже находитесь в этом месте).

Надеюсь, это поможет.

Answer 2

Ваш компонент никогда не рендерится снова. в этом случае вы можете повторить проверки isInProcess | isVerified или использовать менеджер состояний, например, redux, для хранения текущего состояния для isInProcess | isVerified

const [_isInProcess, setIsInProcess] = useState(false);

useEffect(() => {
  const i = setInterval(() => {
    if (isInProcess()) {
      setIsInProcess(true);
      clearInterval(i);
    }
 }, 200);

 clearInterval(i);
}, []);