javascript - AngularJS 使用新的 Firebase Auth 进行路由和解析

Question

我正在尝试将新的 Firebase 与 Auth 系统一起使用，并通过 resolves 在我的 $routeProvider 中限制路由。

不过，我不是很明白。

这是我的。在我的 .config 函数中，我正在定义路由并初始化 firebase。以下是我的配置 block 。

$routeProvider
   .when('/', {
      templateUrl: 'templates/dashboard.ejs',
      //resolve. this needs restricted
   })
   .when('/login', {
      templateUrl: 'templates/login.ejs'
   })

firebase.initializeApp(config);

我在新的文档站点上发现，这些函数在我的 .run() block 中列出，用于 ​​angular。

.run(function($rootScope, $location) {

    $rootScope.authentication = firebase.auth();

    /*firebase.auth().onAuthStateChanged(function(user) {
        if(user) {
            $rootScope.user = user;
        } else {
            $rootScope.user = false;
            $location.path('/login')
        }
    })*/

    var user = firebase.auth().currentUser;

    if (user) {
        $rootScope.user = user;
    } else {
        $rootScope.user = false;
        console.log('No User!');
        $location.path('/login');
    }
})

现在，我上面的内容只是 每隔一段时间 我访问我网站上的任何 url。

所以我的问题是，我如何获取我的 .run() 函数中的内容并将其放入我的 routeProvider 的解析中，以便我能够再次限制路由。

使用旧的 firebase，您只需像下面这样调用 $firebaseAuth() 并有一个像下面这样调用的 routeChangeError 函数。

// In config block. **old way**
$routeProvider
        .when('/', {
            templateUrl: 'templates/dashboard.ejs',
            resolve: {
                "currentAuth": ["$firebaseAuth", function($firebaseAuth) {
                    var ref = new Firebase(fbUrl);
                    var authObj = $firebaseAuth(ref);

                    return authObj.$requireAuth();
                }]
            }
        })

然后是 .run() block 中的 routechangeerror。

 // .run block **old way**
 .run(function($rootScope, $location) {
    $rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) {
        if (eventObj === 'AUTH_REQUIRED') {
            console.log('auth required!');
            $location.path("/login");
        }
    });
})

这不再有效，因为您不再使用 $firebaseAuth()。或 new Firebase(fbUrl); 也可以。

更新

我觉得它有点乱，但仔细研究了路线，我想到了这个。

在我的 route 解析:

.when('/', {
            templateUrl: 'templates/dashboard.ejs',
            resolve: {
                userAuthenticated: ["$http", "$q", function($http, $q) {
                    var deferred = $q;
                    if(firebase.auth().currentUser) {
                        deferred.resolve();
                    } else {
                        deferred.reject();
                        console.log('Really!?');
                    }
                    return deferred.promise;
                }]
            }
        })  

然后是一个简单的 routeChangeError。

$rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
        alert("Not authorised");
})

唯一的问题是，似乎 deferred.promise 返回未定义。它没有激活 routeChangeError 函数。即使我的 console.log() 被调用了。

这可能是因为 firebase.auth().currentUser 在没有用户通过身份验证时返回 null 吗？

Answer 1

这些方法已重命名为 $waitForSignIn() 和 $requireSignIn。

您还可以使用 $firebaseRefProvider 服务来配置您的数据库 URL，以便它自动配置 $firebaseAuthService。

angular.module('app', ['firebase'])
  .constant('FirebaseDatabaseUrl', '<my-firebase-url>')
  .controller('HomeCtrl', HomeController)
  .config(function($firebaseRefProvider, FirebaseDatabaseUrl, $routeProvider) {
     $firebaseRefProvider.registerUrl(FirebaseDatabaseUrl);
     $routeProvider.when("/home", {
        controller: "HomeCtrl",
        templateUrl: "views/home.html",
        resolve: {
          // controller will not be loaded until $waitForSignIn resolves
          "firebaseUser": function($firebaseAuthService) {
            return $firebaseAuthService.$waitForSignIn();
          }
        }
      }).when("/account", {
        controller: "AccountCtrl",
        templateUrl: "views/account.html",
        resolve: {
          // controller will not be loaded until $requireSignIn resolves
          "firebaseUser": function(Auth) {
            // If the promise is rejected, it will throw a $stateChangeError
            return $firebaseAuthService.$requireSignIn();
          }
        }
      });
  });

function HomeController($scope, $firebaseRef, firebaseUser) {

}