Question

在将我们的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;

你可以看到我有'Home'和'Login'组件的引用，但是，我想决定要渲染哪个组件。

我尝试了以下操作：使用'Home'作为initialRoute，并在Home组件构造函数中决定是否需要转到Login页面。

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

这根本不起作用，登录页面从未显示过。

基本上，我想做的是查看localStorage中的用户凭据（或任何其他存储这些信息的地方），并根据此决定是否加载“主页”页面或“登录”页面。

Answer 1

如果GetAuthenticated()是一个提取调用，则需要记住它是异步操作。我推荐一个加载部分，同时提取正在等待，然后决定该方法的结果。

This link是如何使用componentDidMount演示待处理的异步调用的一个很好的示例。一旦实现，您可以继续进行切换。

不要，我不能强调这一点，将用户凭据存储在localStorage中。 永远不会。

Onsen UI使用React实现登录

1 个答案: