在Angular服務中檢測路由更改

Question

我試圖創建一個服務來檢查某個路由是否需要用戶登錄才能訪問該頁面。我有一個工作代碼，但我想把$ scope（$ route（））放在服務裏面。我想將它放在一個服務中，因爲我想在多個控制器中使用它。我如何去做這件事？

當前代碼：

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



    }]); 

Answer 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 
}); 

Answer 2

您可以將服務中的事件處理程序添加到$ rootScope而不是$ scope。

而且它會好得多，如果你的「運行」一節中添加$ routeChangeSuccess因此，所有的網頁可以從一個點進行監控，而不是在每個控制器

Answer 3

你要聽$添加它rootScope而不是$ scope。例如（服務是單身人士，所以一旦你將它注入任何控制器，它就會運行）。我認爲最好在包裝服務的初始化時調用該監聽器。

angular.module('lmsApp') 

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

}]);