我正在为我的应用使用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的钩子)
答案 0 :(得分:2)
首先将您的呼叫转移到Meteor.call
进入componentWillMount
,以使其仅在首次呈现组件之前运行一次。
每次状态或道具更改时,都会调用render
方法中的代码,您可能只需要获取一次登录服务。
接下来,不是将service
字符串存储在局部变量中,而是将其存储在state
中,以便每次更新时都会呈现组件。
getInitialState() {
return {};
},
componentWillMount() {
Meteor.call("getLoginService", (error, service) => {
if(error) {
// handle error
} else {
this.setState({ service });
}
});
},
render() {
const { service } = this.state;
if(service === 'facebook') {
// return facebook view
} else if(service === 'password') {
// return password view
} else {
// return loading view
}
}
您的应用程序第一次呈现时,该服务可能无法使用(它将等待请求返回),因此它将在else
子句中呈现加载视图。
但是,当调用回调时(假设没有错误),组件的状态将会更新,组件将重新呈现。
这次服务将可用,并显示正确的视图。