更新

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”中引用，并且它不会影响我的操作，我无法更新引用并使其显示在{{1}中（第21行）我想要指出的是，我找不到一种方法，一旦用户登录，它就会自动反映到注入navbar.html服务的每个地方。我的问题更清楚了吗？

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

Angular中的Firebase身份验证服务 - 所有控制器都无法使用数据

更新

loginRegister.tpl.js

更新＃2

1 个答案: