AngularJS 路由和使用新的 Firebase 身份验证解决 [英] AngularJS Routes and Resolve with new Firebase Auth

问题描述

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

I am trying to use the new Firebase with the Auth system and restricting routes in my $routeProvider via resolves.

不过，我不太明白.

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

This is what I have. In my .config function, I am defining routes and initializing firebase. The following is in my config block.

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

firebase.initializeApp(config);

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

I have found on the new docs site that these functions are available that are listed in my .run() block for 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');
    }
})

现在，我上面的只是触发每隔一段时间我访问我网站上的任何网址.

Now, what I have above is only firing every other time I access any url on my site.

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

So my question is, how do I take what's in my .run() function and make it into a resolve for my routeProvider so I'm able to restrict routes again.

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

With the old firebase you would just call $firebaseAuth() like below and have a routeChangeError function that was called like the following.

// 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.

And then the routechangeerror in the .run() block.

 // .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); 或者.

This doesn't work anymore because you aren't using $firebaseAuth() anymore. or new Firebase(fbUrl); for that matter either.

更新

我觉得它有点乱，但更多地研究路线，我想出了这个.

I feel like it's a bit messy but looking into routes a little more, I came up with this.

在我的路线解析:

.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.

And then a simple routeChangeError.

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

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

The only problem is, it appears the deferred.promise is returning undefined. It's not activating the routeChangeError function. Even though my console.log() is getting called.

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

Could this be because firebase.auth().currentUser returns null when no user is authenticated?

推荐答案

方法已重命名为 $waitForSignIn() 和 $requireSignIn.

The methods have been renamed to $waitForSignIn() and $requireSignIn.

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

You can also use the $firebaseRefProvider service to configure your Database URL so it automatically configures the $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) {

} 

这篇关于AngularJS 路由和使用新的 Firebase 身份验证解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！