Защищенный маршрут с использованием ReactN загружается до регидратации глобального состояния - PullRequest
Новая
       12

Защищенный маршрут с использованием ReactN загружается до регидратации глобального состояния

0 голосов
/ 22 февраля 2020

Я пытался создать компонент ProtectedRoute, где он будет автоматически перенаправлен на /login, если глобальная переменная isAuthenticated равна false. 

import React, {Component} from 'react'
import Route from "react-router-dom/Route";
import Redirect from "react-router-dom/Redirect";
import { useGlobal } from 'reactn';


const PrivateRouteOld = ({ component: Component, isAuthenticated, ...rest }) => (
    <Route {...rest} render={props => (
        isAuthenticated ? (
            <Component {...props}/>
        ) : (
            <Redirect to={{
                pathname: '/login',
                state: { from: props.location }
            }}/>
        )
    )}/>
);


export default function PrivateRoute(props) {
    const [isAuthenticated] = useGlobal('isAuthenticated');

    if (isAuthenticated)
        return (
            <Route {...props} />
        );
    else
        return (
            <Route render={props => (
                isAuthenticated ? (
                    <Component {...props}/>
                ) : (
                    <Redirect to={{
                        pathname: '/login',
                    }}/>
                )
            )}/>
        );
}

Он работает и перенаправляет на /login, когда нет аутентифицируется и загружает предполагаемый компонент маршрута при входе в систему. Но когда он выполняет холодную загрузку после обновления, он видит isAuthenticated как ложное, потому что он не был повторно обработан функцией persist реагирования.

Как я могу гарантировать, что он будет ждать, чтобы убедиться, что реактивная глобальная переменная повторно гидратируется перед рендерингом?

Reactn persist, вызываемая в index.js: 

initReactnPersist({
    storage: localStorage,
    // Optional.
    whitelist: ['options', 'auth', 'user', 'isAuthenticated'], // List of top-level keys in global, like ['users', 'token']. Default [].
    debug: false, // Enable console.log mode. Default false.
    key: '@remember', // Key in storage. Default '@reactn'.
    debounceDelay: 1000, // Persist debounce delay. Default 1000ms.
    initialValue: {}, // Object that will be merged with rehydrated global. Default {}.
});
...