javascript - Angular 中的 Firebase Auth 服务 - 数据不适用于所有 Controller

Question

我正在尝试创建 Angular (1.6) 服务来处理 Firebase 的所有身份验证。

我打算做什么？

我想在我的导航栏中有一个按钮(navbar.html第23行)，它打开一个模式(loginRegister.tpl.html)，并且在该模式中有所有不同的方式来验证应用程序(我想从Facebook)。一旦它拥有来自 Facebook 的用户信息(Auth.js 第 21 行)，我想使用 Auth 服务使所有 Controller 都可以使用该信息，但似乎在我将信息分配给服务属性后，它并没有反射(reflect)在引用服务属性的其他地方(main.js 第 14 行)

即使我使用用户信息作为参数(loginRegister.tpl.js 第 6 行)关闭模式，我也无法将其分配给 navbar.js 第 20 行上的服务属性。

你能帮我解决这个问题吗？

    Auth.facebookSignIn = function(){
        return authObj.$signInWithPopup("facebook")
        .then(function(data){
            Auth.user = data.user;
        })
        .catch(function(error){
            var errorCode = error.code;
            var errorMessage = error.message;
            var email = error.email;
            var credential = error.credential;
            return error;
        });
    }

plnkr

更新

我应该在哪里实现 if(!Auth.userPromise){ ？因为我尝试将其添加到loginRegister.tpl.js中它实际上没有看到 userPromise服务中的属性。

登录注册.tpl.js

$ctrl.loginFacebook = function () {
    if(!Auth.userPromise) { 
        console.log("No Auth promise"); 
    } else { 
        Auth.userPromise.then(function(user){
            console.log(user);
    });
 } 

更新#2

我尝试过，但它不起作用，我的意思是......它安慰了用户，但我已经可以做到这一点。我的问题是，例如，我在 navbar.js 中引用(第6行)“Auth.user”，这与我做什么无关，我无法更新引用并使其出现在 navbar.html 中(第21行)我想指出的是，我找不到一种方法，一旦用户登录，它就会自动反射(reflect)在 Auth 的任何地方。服务被注入(inject)。我的问题更清楚了吗？

Answer 1

我认为你可以做的是在使用Auth服务(facebook登录)后使用loginRegister.js中的结果，然后getUser和setUser将其放入像userService这样的新服务中，并在身份验证成功后在其中设置数据。现在您可以在任何地方使用 userService(带有用户数据)。

登录注册.js

$ctrl.loginFacebook = function () {
       Auth.facebookSignIn()
        .then(function(data){
           userService.setUser(data.user); //set user
          console.log(userService.getUser()); //check if it was set properly.
          })
        .catch(function(error){
            var errorCode = error.code;
            var errorMessage = error.message;
            var email = error.email;
            var credential = error.credential;
        });
    };

plunkr