使用：Firebase简单登录：电子邮件/密码验证
我的ida：我需要一个’工厂’,我可以注入我的控制器,
让“当前用户ID”始终可用.
我想出了这段代码：
app.factory('User',['angularFire',//Get Current UserID
function(angularFire){
console.log ('FACTORY: User');
var currentUser = {};
var ReturnStr = '';
var ref = new Firebase("https://myFIREBASE.firebaseio.com/");
var authClient = new FirebaseAuthClient(ref,function (err,user) {
if (err) {
ReturnStr = 'FACTORY: User Error: ' + err;
console.log (ReturnStr);
//var User = ReturnStr;
} else if (user) {
console.log ('FACTORY: User: Login successfully:');
console.log (user);
currentUser = user;
} else {
//console.log ('-----------User: Logged Out ---------------');
ReturnStr = 'FACTORY: Logged out: Redirect to Login';
console.log (ReturnStr);
window.location.href = "/login.PHP";
}
});
return currentUser;
}
]);
我最简单的控制器看起来像：
function ToDoCtrl($scope,User) {
$scope.MyUser = User;
$scope.MyUser.test = 'Test';
}
在HTML(角度局部)我有：
<h2>{{MyUser.id}}</h2>
<h2>{{MyUser.email}}</h2>
<h2>{{MyUser.provider}}</h2>
<h2>{{MyUser.test}}</h2>
=> id,email,provider是’undefined’.在控制台中,我看到’FACTORY：用户：登录成功：’,用正确的用户 – 对象.
=>异步加载数据问题？
我也尝试过(没有运气)：
$timeout(function () {
currentUser = user;
}
这样的工厂非常有用！
谢谢你指点我正确的方向！
编辑1.1：现在,使用$rootscope hack
=>同样的效果 – mycontroller太快了 – 工厂慢了.
app.factory('User',['$rootScope','$timeout','angularFire',//Aktueller Benutzer auslesen
function($rootScope,$timeout,angularFire){
console.log ('FACTORY: User');
var currentUser = {};
var ReturnStr = '';
var ref = new Firebase("https://openpsychotherapy.firebaseio.com/");
var authClient = new FirebaseAuthClient(ref,user) {
if (err) {
ReturnStr = 'FACTORY: User Error: ' + err;
console.log (ReturnStr);
//var User = ReturnStr;
} else if (user) {
console.log ('FACTORY: User: Login successfully:');
//currentUser = user;
$timeout(function () {
ReturnStr = 'FACTORY: Inside timout';
console.log (ReturnStr);
currentUser = user;
console.log (currentUser);
$rootScope.myUser = user;
$rootScope.myUserID = user.id;
$rootScope.loggedIn = true;
$rootScope.$apply();
return currentUser;
});
} else {
//console.log ('-----------User: Logged Out ---------------');
ReturnStr = 'FACTORY: Logged out: Redirect to Login';
console.log (ReturnStr);
//var User = ReturnStr;
window.location.href = "/login.PHP";
}
});
return currentUser;
}
]);
TAHNKS任何有用的建议！不知道别人如何解决这个问题！
我的登录名也使用localStorage,因此登录将保持不变,您可以刷新而不必继续登录,并且您可以将其更改为cookie或sessionStorage.
如果你选择使用这种方法,这需要根据你的需要进行调整,无论如何都很复杂,但这对我来说非常可靠,我现在不再需要担心firebaseAuth或angularFire的东西了我的工厂都设置为来回传递数据.我只是在做angularJS的东西,主要是指令.所以这是我的代码.
注意：这将需要修改,有些东西将是伪的或开放式的,以便您找出满足您的需求.
AuthCtrl.js
'use strict';
angular.module('YOUR_APP',[]).
controller('AuthCtrl',[
'$scope','$location','fireFactory',function AuthCtrl($scope,$location,angularFire,fireFactory) {
// FirebaseAuth callback
$scope.authCallback = function(error,user) {
if (error) {
console.log('error: ',error.code);
/*if (error.code === 'EXPIRED_TOKEN') {
$location.path('/');
}*/
} else if (user) {
console.log('Logged In',$scope);
// Store the auth token
localStorage.setItem('token',user.firebaseAuthToken);
$scope.isLoggedIn = true;
$scope.userId = user.id;
// Set the userRef and add user child refs once
$scope.userRef = fireFactory.firebaseRef('users').child(user.id);
$scope.userRef.once('value',function(data) {
// Set the userRef children if this is first login
var val = data.val();
var info = {
userId: user.id,name: user.name
};
// Use snapshot value if not first login
if (val) {
info = val;
}
$scope.userRef.set(info); // set user child data once
});
$location.path('/user/' + $scope.userRef.name());
} else {
localStorage.clear();
$scope.isLoggedIn = false;
$location.path('/');
}
};
var authClient = new FirebaseAuthClient(fireFactory.firebaseRef('users'),$scope.authCallback);
$scope.login = function(provider) {
$scope.token = localStorage.getItem('token');
var options = {
'rememberMe': true
};
provider = 'twitter';
if ($scope.token) {
console.log('login with token',$scope.token);
fireFactory.firebaseRef('users').auth($scope.token,$scope.authCallback);
} else {
console.log('login with authClient');
authClient.login(provider,options);
}
};
$scope.logout = function() {
localStorage.clear();
authClient.logout();
$location.path('/');
};
}
]);
而现在,这个漂亮而简单但又可重复使用的工厂.您需要为baseUrl变量设置应用的Firebase路径才能生效.
fireFactory.js
'use strict';
angular.module('YOUR_APP').
factory('fireFactory',[
function fireFactory() {
return {
firebaseRef: function(path) {
var baseUrl = 'https://YOUR_FIREBASE_PATH.firebaseio.com';
path = (path !== '') ? baseUrl + '/' + path : baseUrl;
return new Firebase(path);
}
};
}
]);
信息
您只为工厂提供一条路径引用,例如“用户”,它将用作完整路径的一部分,用于存储用户数据的位置.
fireFactory.firebaseRef('users')
一旦你有一个用户的参考集,他们将不需要再次设置它将只使用现有的数据和.auth().另外,如果localStorage中存在“令牌”,它也会使用它来auth()用户.
否则,它将登录()用户并弹出Oauth窗口,以便他们使用您提供的任何选项来执行此操作.
在Firebase / FirebaseAuthClient和angularFire上,我花了很多时间,很多小时甚至几个月都在寻找比这更好的东西.通过Firebase API和FireAuth API的方式,无论如何使用angularFire使它们彼此很好地玩耍是非常烦人的.这非常令人沮丧,但我终于完成了它.
如果你想查看我的应用程序的代码,看看我是如何更完整地做这些事情,你可以在this branch of my Webernote github repo找到它.
随意分叉,在本地安装和运行它,或者即使你喜欢也可以为它做贡献.我可以自己使用一些帮助:)
希望这对你有所帮助!!
