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

Question

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

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

我期望发生的事情： 单击 FAQ link 如果注销，我应该被转发到登录页面，并且在登录时应该显示 FAQ 页面。

实际发生了什么： FAQ 页面根本无法访问。登录没有任何区别。它也不会在注销时将我转到登录页面。

我在 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。

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

How to secure Angular routes with Firebase v3?

angularjs

firebase

angularfire

firebase-authentication