javascript - 路由变更时的认证

Question

我希望 Angular 在每次路由更改时检查身份验证。我的代码如下所示。

config.js

angular.module('message').run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
    $rootScope.$on('$routeChangeStart', function (event) {

        if (!Auth.isLoggedIn()) {
            console.log('DENY');
            event.preventDefault();
            $location.path('/Login');
        }
        else {
            console.log('ALLOW');
            $location.path('/home');
        }
    });
}]);

authenticationService.js

var app=angular.module('message');
app.factory('Auth', function($rootScope){


return{
    setUser : function(aUser){
        $rootScope.user = aUser;
    },
    isLoggedIn : function(){
        return($rootScope.user)? $rootScope.user : false;
    }
  }
})

我的 app.js 看起来像这样

var app=angular.module('message',['restangular','ngRoute']);


app.config(['$routeProvider', function ($routeProvider){
    $routeProvider
    .when("/", {
        templateUrl : "view/user.html",
        controller : "loginController"
    })
    .when("/NewUser", {
        templateUrl : "view/addUser.html",
        controller : "MainCtrl"
    })
    .when("/ViewUsers", {
        templateUrl : "view/ViewUsers.html",
        controller : "MainCtrl"
    })
    .when("/EditUser/:id", {
        templateUrl : "view/EditUser.html",
        controller : "MainCtrl"
    })
    .when("/Register", {
        templateUrl : "view/Register.html",
        controller : "RegisterController"
    })
    .when("/Login", {
        templateUrl : "view/user.html",
        controller : "loginController"
    })
    .when("/Home", {
        templateUrl : "view/Home.html",
        controller : "HomeController"
    })
    .when("/ForgotPassword", {
        templateUrl : "view/Home.html",
        controller : "ForgotController"
    });

}]);

app.controller('MainCtrl',function($scope,Restangular,$location,$routeParams,$http,Auth){
    Restangular.setBaseUrl('webapi');

    //watch to work on user state changed
     $scope.$watch(Auth.isLoggedIn, function (value, oldValue) {

            if(!value && oldValue) {
              console.log("Disconnect");
              $location.path('/Login');
            }

            if(value) {
              console.log("Connect");
              //Do something when the user is connected
              $location.path('/Home');
            }

          }, true);


    //setting profile name as id for profiles model

     var index = $routeParams.id;
     $scope.index=index;
     console.log($scope.index)
    var profiles = Restangular.all('profiles');

     Restangular.setRestangularFields({
          id: "_id"
        });

     Restangular.extendModel('profile', function(profile) {
          profile.id = profile.profileName;
        });

     Restangular.addResponseInterceptor(function (data, operation, what, url, response, deferred) {
         if (operation == "getList") {
             return response.data;
         }
         return response+=response.data;
     });

     data=function(user){
         consle.log(user);
     }


    // This will query /profiles and return a promise.
    profiles.getList().then(function(profiles) {
      $scope.profiles = profiles;    
      $scope.saveUser=function(){
          $scope.profile.profileName=$scope.profile.firstName+$scope.profile.lastName;
          console.log($scope.profile);
          profiles.post($scope.profile);
     }

      $scope.showUser=function(id){
          $location.path('/EditUser/'+id);
      }
      $scope.editUser=function(id){
          //put requestusing http
          var probject={};
          probject.firstName=profiles[id].firstName;
          probject.lastName=profiles[id].lastName;
          probject.profileName=profiles[id].profileName;
          probject.id=profiles[id].id;
          probject.created=profiles[id].created;
          $http.put("http://localhost:8080/messenger/webapi/profiles/"+$scope.profiles[id].profileName,probject).then(function(data){
             console.log(data);
          });


      }
    });




      $scope.go = function ( path ) {
          $location.path( path );
        };
});

我面临的问题是我的代码在没有 config.js 的情况下运行良好 但每当我使用 config.js 向身份验证服务注册 $onroutechange 事件时，我的代码就会停止工作而不会出现任何错误。

我可能会做一些愚蠢的事情，因为我是 Angular 新手。 请帮忙。

Answer 1

尝试这样的事情:

$rootScope.$on('$routeChangeStart', function (event, next) {
    if (next.$$route.originalPath!=='/Login' && !Auth.isLoggedIn()) {
    ...

否则你会陷入无限循环。