如何使用 Firebase v3 保护 Angular 路由？

Question

我想使用 Firebase V3、AngularJS 和 ui.router 保护我网站上的各种路由。

This 看起来像一个类似的问题。我已按照该 SO 帖子中的步骤进行操作，但它对我不起作用。

我预计会发生什么： 单击常见问题解答链接时，如果注销，我应该被转发到登录页面，并且应该在登录时显示常见问题解答页面。

实际发生的情况： 根本无法访问常见问题解答页面。登录没有任何区别。注销时它也不会将我转发到登录页面。

我在run 函数中收到此错误。

ReferenceError: Firebase is not defined(…)       

我已经在页面上包含了 AngularFire，如果我没有收到模块注入器错误，即使我从依赖项数组中删除了 Firebase。

var app = angular.module('app', ['ui.router', 'firebase']);
app.constant('FirebaseDatabaseUrl', 'https://myfbdb.firebaseio.com');
app.config(function($stateProvider, $urlRouterProvider, $firebaseRefProvider, FirebaseDatabaseUrl) {
    $firebaseRefProvider.registerUrl(FirebaseDatabaseUrl);
// If a route other than status is requested,
// go to the auth route
//$urlRouterProvider.otherwise('/logintest/login');

$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'pages/login.html',
        controller: 'LoginController as login'
    })

    .state('faq', {
        url: '/faq',
        templateUrl: 'pages/faq.html',
        controller: 'FaqController as faq',
        resolve: {
          // controller will not be loaded until $requireSignIn resolves
          "firebaseUser": ["$firebaseAuthService", function($firebaseAuthService) {
            console.log('waitForSignIn')
                    // $waitForSignIn returns a promise so the resolve waits for it to complete
                    return $firebaseAuthService.$waitForSignIn();
            }]
          } 

    })
    .state('about', {
        url: '/about',
        templateUrl: 'pages/about.html',
        controller: 'AboutController as about',
        resolve: {
          // controller will not be loaded until $requireSignIn resolves
          "firebaseUser": ["$firebaseAuthService", function($firebaseAuthService) {
            // If the promise is rejected, it will throw a $stateChangeError
            return $firebaseAuthService.$requireSignIn();
          }]
        }           
    })

});



app.controller('FaqController', ['$scope', 'firebaseUser', function($scope, firebaseUser){
console.log('faq')
}]);





app.run(["$rootScope", "$state", function($rootScope, $state) {
  console.log('run');
  $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
 // We can catch the error thrown when the $requireSignIn promise is rejected
 // and redirect the user back to the home page
 if (error === "AUTH_REQUIRED") {
    console.log('redirecting to login page')
   $state.go("login");
 }
 });
  }]);

Answer 1

AngularFire 2.0+ 版本与 Firebase 3.0 兼容。低于 AngularFire 2.0 的任何内容都适用于旧版 Firebase。