检测 Angular 服务中的路由变化答案

【问题标题】：Detect route change in an Angular service检测 Angular 服务中的路由变化
【发布时间】：2017-01-01 14:06:21
【问题描述】：

我正在尝试创建一个服务来检查某个路由是否需要用户登录才能访问该页面。我有一个工作代码，但我想将 $scope.$on('routeChangeStart) 函数放在服务中。我想将它放在服务中，因为我想在多个控制器中使用它。我该怎么办？

当前代码：

profileInfoCtrl.js

angular.module('lmsApp', ['ngRoute'])

.controller('profileInfoCtrl', ['$scope', '$location', ' 'pageAuth', function($scope, $location, pageAuth){

  //I want to include this in canAccess function
  $scope.$on('$routeChangeStart', function(event, next) {

    pageAuth.canAccess(event, next);
  });
}]);

pageAuth.js

 angular.module('lmsApp')

.service('pageAuth', ['$location', function ($location) {

  this.canAccess = function(event, next) {

    var user = firebase.auth().currentUser;


    //requireAuth is a custom route property
    if (next.$$route.requireAuth && user == null ) {

      event.preventDefault(); //prevents route change
      alert("You must be logged in to access page!");

    }
    else {
      console.log("allowed");
    }

  }

}]);

routes.js

 angular.module('lmsApp')
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
      $routeProvider

.when('/admin', {
          templateUrl: 'view/admin.html',
          css: 'style/admin.css',
          controller: 'adminCtrl',
          requireAuth: true //custom property to prevent unauthenticated users
        })

        .otherwise({
          redirectTo: '/'
        });



    }]);

【问题讨论】：

stackoverflow.com/questions/16344223/…

标签： javascript angularjs routes angularjs-scope ngroute

【解决方案1】：

通过使用 $routeChangeStart，您可以在每次路由更改时收听 $routeProvider 发送的广播。我认为您不需要在多个地方（控制器）调用它，只需检查一下即可。
在您的服务中：

angular.module('lmsApp')
.service('pageAuth', ['$location', function ($location) {
var canAccess = function(event,next,current){

var user = firebase.auth().currentUser;
//requireAuth is a custom route property
    if (next.$$route.requireAuth && user == null ) {

      event.preventDefault(); //prevents route change
      alert("You must be logged in to access page!");

    }
    else {
      console.log("allowed");
    }

}

$rootScope.$on('$routeChangeStart',canAccess); 
}]);

然后将您的服务注入应用程序的.run() 部分。这将确保检查将自动完成（通过前面提到的广播）。
在您的配置部分：

angular.module('lmsApp')
    .run(function runApp(pageAuth){
 //rest of your stuff
});

【讨论】：

【解决方案2】：

你需要听 $rootScope 而不是 $scope。

而且我认为最好在包装服务的 init 上调用该侦听器，例如（服务是单例的，因此一旦您将其注入任何控制器，它就会运行）。

angular.module('lmsApp')

.service('stateService', ['$rootScope', function ($rootScope) {
    $rootScope.$on('$locationChangeStart', (event, next, current) => {
        // do your magic
    });

}]);

【讨论】：

【解决方案3】：

您可以将服务中的事件处理程序添加到 $rootScope 而不是 $scope。

此外，如果您在“.run”部分添加 $routeChangeSuccess 会更好，这样可以从一个点监控所有页面，而不是在每个控制器中添加它

【讨论】：