0

Onsen v1 アプリ (AngularJS1 ベース) を React を使用して Onsen v2 に移行しているときに、ちょっとした問題に遭遇しました: ユーザー認証に関するロジックの実装 (「保存された資格情報」がない場合にログイン画面にリダイレクトする)

これが私のアプリの構造です...

エントリ ポイントは、次のような 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;

「ホーム」コンポーネントと「ログイン」コンポーネントの両方の参照があることがわかりますが、どちらのコンポーネントをレンダリングするかを決定したいと考えています。

私は次のことを試しました: 「ホーム」を initialRoute として使用し、ログイン ページに移動する必要があるかどうかをホーム コンポーネント コンストラクターで決定します。

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

これは単に機能せず、ログイン ページが表示されませんでした。

基本的に、私がやりたいことは、localStorage でユーザー資格情報 (またはこれらの種類の情報を保存するための他の場所) を調べ、これに基づいて、「ホーム」ページまたは「ログイン」ページをロードするかどうかを決定することです。ページ。

4

1 に答える 1

0

フェッチ呼び出しの場合GetAuthenticated()は、非同期で動作することを覚えておく必要があります。フェッチが保留されている間にロードセクションを作成してから、メソッドの結果を決定することをお勧めします。

このリンクcomponentDidMountは、保留中の非同期呼び出しを示すために使用できる良い例です。それが実装されたら、切り替えを行うことができます。

これを十分に強調することはできませんが、ユーザー資格情報をこれまでに保存しないlocalStorageでください。決して。

于 2018-04-05T10:50:11.123 に答える