时间戳

首页 > 解决方案 > Meteor 用户在客户端始终未定义

javascript - Meteor 用户在客户端始终未定义

问题描述

我有一个问题，我是 MeteorJS 的新手，我想我需要一些帮助。我实施了电子邮件帐户验证。接下来我想登录用户，但前提是用户经过验证。这是问题，因为Meteor.user()在客户端中总是未定义。你能帮我解释一下我做错了什么吗？

class App extends Component {
constructor(props){ 
    super(props);

    this.state = {
        verified: this.props.currentUser.emails[0].verified
    };
}

render(){

    return (
        <div>
            <Navbar collapseOnSelect fluid>
                <nav className="sideBar-menu">
                    <div className="pull-right sidebar-right">
                        <ButtonToolbar className="pull-left sidebar-toolbar">
                            {!this.state.verified && <Button>Sign in</Button>}
                            {this.state.verified && <Button>Sign out</Button>}
                            <Button bsStyle="danger">Sign up</Button>
                        </ButtonToolbar>                    
                    </div>
                </nav>
            </Navbar>            
        </div>
    )
  }
}

const dataHOC = withTracker((props)=>{
   return {
      currentUser: Meteor.user()
   }
})(App);

export default dataHOC

标签： javascriptmeteor

解决方案

唯一返回当前用户的Meteor.user()对象，一旦用户登录。因此，currentUser如果没有用户登录，则不能使用属性。

因此，您的状态可以使用两个值进行登录和验证：

 const currentUser = this.props.currentUser
 this.state = {
   loggedIn: currentUser,
   verified: currentUser && currentUser.emails[0].verified
 };

sign-in如果没有登录状态，您的渲染代码将显示该元素：

<ButtonToolbar className="pull-left sidebar-toolbar">
  {!this.state.loggedIn && <Button>Sign in</Button>}          
  { this.state.loggedIn && <Button>Sign out</Button>}
  <Button bsStyle="danger">Sign up</Button>
</ButtonToolbar>

然后，您可以使用它verified来显示更多信息，例如您的用户尚未经过验证的通知，并仅显示经过验证的用户的内容。

安全说明：请注意，这只是 UI 糖果，如果您真的想防止未经验证的用户订阅数据或调用某些方法/更新数据，您应该始终user.emails[i].verified在方法和出版物中检查。

推荐阅读