0

在使用 React 将我们的 Onsen v1 应用程序（基于 AngularJS1）迁移到 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”作为初始路由，并在 Home 组件构造函数中决定是否需要进入登录页面。

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()是 fetch 调用，您需要记住它是异步执行的。我建议在 fetch 待处理时加载部分，然后再决定方法的结果。

此链接是一个很好的示例，说明了如何使用它componentDidMount来演示挂起的异步调用。一旦实施，您就可以继续进行切换。

不要，我不能强调这一点，localStorage永远存储用户凭据。从来没有。

于 2018-04-05T10:50:11.123 回答