我正在为我的应用程序使用Meteor和React . 在我的应用程序中,我使用account-ui,account-facebook让用户可以使用Facebook帐户登录 . 现在,我想检查用户是否使用Facebook登录或常规用户/传递登录 . 我看一下用户集合并看到它
1) if user used facebook to login, there is services.facebook in user collection
2) if user used regular user/pass to login, there is services.password in users collection
在服务器中,我有返回loginservice(facebook或密码)的方法
Meteor.methods({
getLoginService: function(){
let services = Meteor.user().services;
if (typeof services.facebook!=='undefined'){
return 'facebook';
}else if (typeof services.password!=='undefined'){
return 'password';
}
return 'undefined';
},
});
在客户端,如果将检查是否(Facebook登录)或(用户/通过登录),那么我可以相应地渲染屏幕
App.Components.Dashboard = React.createClass({
render() {
var lservice='';
Meteor.call("getLoginService",function(error,service) {
if (error){
}else {
lservice = service;
}
});
if (lservice === 'facebook'){
return (
<div id="dashboard-content">
<div className="row">
<div className="col-lg-12">
<h1 className="page-header">Facebook connect</h1>
<p>put facebook information here</p>
</div>
</div>
</div>
);
}else{
return (
<div id="dashboard-content">
<div className="row">
<div className="col-lg-12">
<h1 className="page-header">Facebook connect</h1>
<p>put facebook connect button here</p>
</div>
</div>
</div>
);
}
}
});
问题出在客户端 . 因为Meteor.call是异步的,所以lservice不会从回调函数中获取值 . 我也试图找到一种方法将html返回到回调函数(错误,服务)但不成功 .
你还知道解决这个问题吗?或者您是否有更好的想法来识别用户用于登录的服务(也许是帐户-face的钩子)
1 回答
首先将您的调用
Meteor.call
移动到componentWillMount
,这样它只运行一次 - 就在组件首次渲染之前 .每次状态或道具更改时,都会调用
render
方法中的代码,您可能只需要获取一次登录服务 .接下来,不是将
service
字符串存储在局部变量中,而是将其存储在state
中,以便每次更新时组件都会呈现 .您的应用程序第一次呈现时,服务可能会等待请求返回),因此它将在
else
子句中呈现加载视图 .但是,当调用回调时(假设没有错误),将更新组件的状态并重新呈现组件 .
这次服务将可用,并显示正确的视图 .