Пользовательский интерфейс Onsen реализует вход через React

Question

При переносе нашего приложения Onsen v1 (на основе AngularJS1) в Onsen v2 с помощью React я столкнулся с небольшой проблемой: реализация логики в отношении аутентификации пользователя (перенаправление на экран входа в систему, если нет "сохраненных учетных данных")

Вот как структурировано мое приложение...

Точкой входа является файл App.js, который выглядит следующим образом:

import React from 'react';

import {Navigator} from 'react-onsenui';

import Home from './Home';
import Login from './Login';

class App extends React.Component {

    renderPage(route, navigator) {
        route.props = route.props || {};
        route.props.key = route.comp.displayName;
        route.props.navigator = navigator;
        return React.createElement(route.comp, route.props);
    }

    render() {
        return (
            <Navigator
                initialRoute={{comp: Home}}
                renderPage={this.renderPage}
            />
        );
    }
}

export default App;

Вы можете видеть, что у меня есть ссылки на оба компонента: "Домой" и "Вход", однако я хочу решить, какой компонент визуализировать.

Я попробовал следующее: используйте "Home" в качестве initialRoute и решите в конструкторе компонентов Home, если нам нужно перейти на страницу входа.

constructor(props) {
    super(props);
    this.state = {
        isOpen: false
    };
    const authenticated = GetAuthenticated();
    if(!authenticated) {
       this.props.navigator.pushPage({comp: Login});
    }
}

Это просто не сработало, страница входа никогда не отображалась.

В общем, я хотел бы посмотреть в localStorage учетные данные пользователя (или любое другое место для хранения такого рода информации), и на основании этого решить, загружать ли "домашнюю" страницу или "логин". стр.

Answer 1

Если GetAuthenticated() это вызов извлечения, вы должны помнить, что он действует асинхронно. Я бы порекомендовал раздел загрузки, пока идет выборка, а затем решение о результате метода.

Эта ссылка является хорошим примером того, как вы можете использовать componentDidMount продемонстрировать ожидающие асинхронные вызовы. После того, как это будет реализовано, вы можете перейти к переключению.

НЕ, и я не могу этого подчеркнуть, сохраните учетные данные пользователя в localStorage Когда-либо. Никогда