Как я могу получить значение по умолчанию в моем React Context для моего localStorage до того, как response-router-dom отобразит мой компонент? - PullRequest
Новая
       36

Как я могу получить значение по умолчанию в моем React Context для моего localStorage до того, как response-router-dom отобразит мой компонент?

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

Я пытаюсь обработать аутентификацию на стороне клиента для пользователей, и мне удалось использовать контекст для входа или выхода пользователя, однако контексты не сохраняются на странице refre sh. Я использую Context, потому что я хочу, чтобы мой заголовок изменялся в зависимости от того, вошел ли пользователь в систему, и я хочу, чтобы реакции-router-dom направлялся в зависимости от того, вошел ли пользователь в систему.

В результате, Я пытаюсь использовать localStorage для установки значения по умолчанию: 

function App() {
    const [isAuthorized, setIsAuthorized] = useState(window.localStorage.getItem('auth'))
    const value = { isAuthorized, setIsAuthorized};

    return (
        <AuthorizedContext.Provider value={value}>
            <div className='app'>
                {<Routing/>}
            </div>
        </AuthorizedContext.Provider>
    )
}

А затем в моей маршрутизации используйте этот контекст, чтобы определить, должен ли пользователь получить доступ к компоненту или быть отодвинутым на мой страница входа 

function Routing() {
    const {isAuthorized} = useContext(AuthorizedContext)

    //Return component only if logged in
    const withSecure = (Component) => (props) =>  (
        isAuthorized === true
            ?
                <Component {...props} />
            :
                <Redirect to='/login'/>
    )

    //Return with header if requested
    const withHeader = (Component) => (props) => (
        <>
            <Header />
            <Component {...props} />
        </>
    )

    //Do both of these methods, i.e withSecure(withHeader())
    const withSecureRendering = compose(
        withSecure,
        withHeader
    )

    return (
        <Router>
            <Switch>
                <Route exact path="/" render={withSecureRendering(Homepage)} />
                <Route exact path="/recipies" render={withSecureRendering(Recipies)} />
                <Route exact path="/pantry" render={withSecureRendering(Pantry)} />
                <Route exact path="/login" render={withHeader(Login)} />
                <Route exact path="/signup" render={withHeader(SignUp)} />
                <Route path="*" render={withHeader(NotFound)} />
            </Switch>
        </Router>
    )
}

ReactDOM.render(<App/>, document.getElementById("root"));

Мой контекст очень прост: 

export default React.createContext()

(я также пытался установить значение по умолчанию, но ничего не изменилось, поэтому пока я удалил его.)

Итак, как гласит заголовок, как я могу получить значение моего контекста по умолчанию для моего localStorage до того, как response-router-dom отобразит мой компонент?

...