Question

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

但是，我不太了解。

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

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

firebase.initializeApp(config);

我在新的文档网站上发现这些功能可用，我的.run()块中列出了角度。

.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');
    }
})

现在，我上面所说的只是解雇every other time我访问了我网站上的任何网址。

所以我的问题是，我如何在我的.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（）块中的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);或者.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; }] } })。

更新

我觉得它有点乱，但是稍微调查一下路线，我想出了这个。

在我的路线中解决：

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

然后是一个简单的routeChangeError。

console.log()

唯一的问题是，看起来deferred.promise返回undefined。它没有激活routeChangeError函数。即使我的firebase.auth().currentUser被调用了。

这可能是因为mydata在没有用户通过身份验证时返回null吗？

Answer 1

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

您还可以使用$firebaseRefProvider服务配置数据库网址，以便自动配置$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) {

}

Answer 2

所以我不确定它是否是全球最干净的切割代码，但它确实有效。

Firebase现在提供了一个新功能，可以让当前用户进行身份验证（如果有）。初始化firebase后，您可以访问此功能。 firebase.auth().currentUser。

（如果登录则此函数返回用户详细信息，否则返回null）

因此，在您的路线中，您将根据此功能的结果创建并解决承诺。一定要将deferred定义为$q.defer();（我在这个问题更新中可以看到，我一直在努力）

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

然后在Angular的run函数中，您将注意路径更改错误。

.run(function($rootScope, $location) {
   $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
      if(rejection == 'NOT_AUTHORIZED')
      {
         $location.path('/login');
      }
    })
})

在上面的函数中，您只需查看路径更改中的错误。如果拒绝等于＆＃39; NOT_AUTHORIZED＆＃39; （在resolve函数中通过我们的拒绝函数传递）然后我们将用户重定向到登录屏幕以进行身份验证。

注意：在这个routeChangeError函数中，你可以自由地做你喜欢的事情，甚至可能会显示一些用户未被授权的咆哮。

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

2 个答案: