检测Angular服务中的路由变化

Detect route change in an Angular service

本文关键字：路由 变化 Angular 服务 检测      更新时间：2023-09-26

我正在尝试创建一个服务来检查某个路由是否需要用户登录才能访问该页面。我有一个工作代码，但我想把$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: '/'
        });

    }]);

通过使用$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
});

你应该在服务中添加一个事件处理程序到$rootScope而不是$scope。

如果你在"。run"部分添加$ routechangessuccess也会更好，这样所有的页面都可以从一个点监控，而不是在每个控制器中添加它

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

我认为最好在包装服务的init上调用这个监听器，例如(服务是单例的，所以一旦你将它注入任何控制器，它就会运行)。

angular.module('lmsApp')
.service('stateService', ['$rootScope', function ($rootScope) {
    $rootScope.$on('$locationChangeStart', (event, next, current) => {
        // do your magic
    });
}]);
相关文章：