AngularJS重定向授权答案

【问题标题】：AngularJS Redirect for AuthorizationAngularJS重定向授权
【发布时间】：2015-08-13 01:19:36
【问题描述】：

我已经用 angularfire 和 firebase 构建了一个登录系统。

我有一个在用户登录时和其他多次时调用的函数。检查 authData 是否存在，如果存在则将用户注册为已登录。

fbRef.onAuth(authDataCallback);
function authDataCallback(authData) {
    if (authData) {
        $scope.loggedIn = true;
    } else {
        $scope.loggedIn = false;
    }
}

我也设置了路线

.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller: '',
        templateUrl: '/company/pages/account/pages/dashboard.php',
    })
    .when('/dashboard', {
        controller: '',
        templateUrl: '/company/pages/account/pages/dashboard.php',
    })
    .when('/login', {
        controller: 'Authorization',
        templateUrl: '/company/pages/account/pages/login.php',
    })
    .when('/register', {
        controller: 'Authorization',
        templateUrl: '/company/pages/account/pages/register.php',
    })
})

我希望除登录和注册页面之外的每个页面都仅限于登录用户。如果$scope.loggedIn 返回为假，我希望将用户重定向到登录页面。

我在互联网上尝试了许多解决方案，但没有一个对我有用。其中大部分都导致了超出限制的错误。

在我的情况下如何限制访问？

【问题讨论】：

标签： jquery angularjs firebase

【解决方案1】：

您可以检查“loggedIn”变量是否有变化

    app.controller('MyCtrl', ['$scope', '$location', function($scope, $location){

        fbRef.onAuth(authDataCallback);

        $scope.loggedIn = null;

        function authDataCallback(authData) {
            $scope.loggedIn = authData ? true : false
        }

        $scope.$watch("loggedIn", function(val){

            val === false && $location.path("/login");

        });

    });

【讨论】：

当你可以简单地在回调中做同样的事情时，为什么要监视登录用户？
特别是因为，我认为该函数以它为例，并且可能 authDataCallback 函数不是角度的一部分，他真正想要的是检查变量'loggedIn'。其实我也想过
无需查看控制器内部的登录状态。您应该始终将用户解析为控制器。 AngularFire 对此有特定的功能，例如 $waitForAuth。

【解决方案2】：

在我们的控制器中，检查回调并相应地重定向。

app.controller('MyCtrl', ['$scope', '$location', function($scope, $location) {

  fbRef.onAuth(authDataCallback);

  function authDataCallback(authData) {
      authData ? $location.path("/dashboard") : $location.path("/login");
  }

}]);

【讨论】：

这只会在每隔一次访问基本 URL 时导致登录重定向。不是万无一失的。不能工作。
您还需要什么？在您的问题中提及这一点。

【解决方案3】：

计划：

另一种可能的解决方案是从$routeProvider 中设置一个名为loginRequired 的变量并从$routeChangeStart 对照$rootScope.loggedIn 检查变量。

不幸的是，您必须将$scope.loggedIn 移动到$rootScope.loggedIn。

一种可能的实现方式：

在路由器中：

.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            controller: '',
            templateUrl: '/company/pages/account/pages/dashboard.php',
            loginRequired: true
        })
        .when('/dashboard', {
            controller: '',
            templateUrl: '/company/pages/account/pages/dashboard.php',
            loginRequired: true
        })
        .when('/login', {
            controller: 'Authorization',
            templateUrl: '/company/pages/account/pages/login.php',
            loginRequired: false
        })
        .when('/register', {
            controller: 'Authorization',
            templateUrl: '/company/pages/account/pages/register.php',
            loginRequired: true
        })
    })

在app.run：

app.run(
    ['$rootScope', '$location', function($rootScope, $location) {

        $rootScope.$on('$routeChangeStart', function() {
            if ($rootScope.loginRequired && !$rootScope.loggedIn) {
                $location.path("/login");
            }
        });

    }]);

【讨论】：