Angular 中的 Firebase 身份验证服务——数据并非对所有控制器都可用

Question

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

我打算做什么？

我想在我的导航栏（navbar.html 第 23 行）中有一个按钮，它打开一个模式（loginRegister.tpl.html），并且在该模式中具有所有不同的方式来验证应用程序（我想从Facebook）。一旦它获得了来自 Facebook 的用户信息（Auth.js 第 21 行），我想使用 Auth 服务将信息提供给所有控制器，但似乎在我将信息分配给服务属性之后，它并没有反映在引用服务属性的其他地方（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 属性。

loginRegister.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 行) 我想指出的是，我无法找到一种方法，即一旦用户登录，它就会在Auth 服务被注入的任何地方自动反映。我的问题更清楚了吗？

Answer 1

我认为您可以做的是在使用 Auth 服务（facebook 登录）后使用 loginRegister.js 中的结果，然后 getUser 和 setUser 将其放入 userService 之类的新服务中，并在成功验证后将数据设置在那里。现在您可以在任何地方使用 userService（带有用户数据）。

loginRegister.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