Onsen UI 使用 React 实现登录

Posted 2023-02-22

【中文标题】Onsen UI 使用 React 实现登录

【英文标题】：Onsen UI implement login with React

【发布时间】：2018-09-15 03:43:04

【问题描述】：

在使用 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”作为初始路由，并在 Home 组件构造函数中决定是否需要进入登录页面。

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

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

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

【参考方案1】：

如果 GetAuthenticated() 是一个 fetch 调用，您需要记住它是异步执行的。我建议在 fetch 待处理时使用 loading 部分，然后再决定方法的结果。

This link 是一个很好的例子，说明如何使用componentDidMount 来演示挂起的异步调用。实施后，您可以继续进行切换。

不要，我怎么强调都不为过，将用户凭据存储在localStorage 中。 从来没有。

【讨论】：

嗨！谢谢回复。我尝试使用 componentDidMount，但是当我尝试将“登录”组件作为参数传递给导航器对象时，它显示“未定义登录”。任何想法为什么会发生这种情况？

你能用你为componentDidMount 尝试的代码编辑 OP，因为它可以是任意数量的东西