AngularJs - 取消路线更改事件

Question

如何在AngularJs中取消路线更改事件？

我目前的代码是

$rootScope.$on("$routeChangeStart", function (event, next, current) {

// do some validation checks
if(validation checks fails){

    console.log("validation failed");

    window.history.back(); // Cancel Route Change and stay on current page  

}
});

即使验证失败,Angular也会拉出下一个模板和相关数据,然后立即切换回上一个视图/路由.如果验证失败,我不希望angular拉下一个模板和数据,理想情况下应该没有window.history.back().我甚至尝试过event.preventDefault()但没有用.

Answer 1

而不是$routeChangeStart使用$locationChangeStart

这是来自angularjs家伙的讨论:https://github.com/angular/angular.js/issues/2109

编辑3/6/2018您可以在以下文档中找到它:https://docs.angularjs.org/api/ng/service/$location#event-$locationChangeStart

例:

$scope.$on('$locationChangeStart', function(event, next, current) {
    if ($scope.form.$invalid) {
       event.preventDefault();
    }
});

Answer 2

一个更完整的代码示例,使用 $locationChangeStart

// assuming you have a module called app, with a 
angular.module('app')
  .controller(
    'MyRootController',
    function($scope, $location, $rootScope, $log) {
      // your controller initialization here ...
      $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        $log.info("location changing to:" + next); 
      });
    }
  );

我对在我的根控制器(顶级控制器)中挂起它并不是很满意.如果有更好的模式,我很想知道.我很有角度:-)

Answer 3

解决方案是广播'notAuthorized'事件,并在主范围内捕获它以重新更改位置.我认为这不是最好的解决方案,但它对我有用:

myApp.run(['$rootScope', 'LoginService',
    function ($rootScope, LoginService) {
        $rootScope.$on('$routeChangeStart', function (event, next, current) {
            var authorizedRoles = next.data ? next.data.authorizedRoles : null;
            if (LoginService.isAuthenticated()) {
                if (!LoginService.isAuthorized(authorizedRoles)) {
                    $rootScope.$broadcast('notAuthorized');
                }
            }
        });
    }
]);

在我的主控制器中:

    $scope.$on('notAuthorized', function(){
        $location.path('/forbidden');
    });

注意:在角点上有一些关于这个问题的讨论,还没有解决:https: //github.com/angular/angular.js/pull/4192

编辑:

要回答评论,以下是有关LoginService工作的更多信息.它包含3个功能:

1. login()(名称具有误导性)向服务器发出请求以获取有关(先前)已登录用户的信息.还有另一个登录页面,它只填充服务器中的当前用户状态(使用SpringSecurity框架).我的Web服务并非真正无状态,但我更愿意让这个着名的框架处理我的安全问题.
2. isAuthenticated()只搜索客户端Session是否填充了数据,这意味着它已经过验证(*)
3. isAuthorized()处理访问权限(超出本主题的范围).

(*)路线更改时填充我的会话.我已经覆盖了when()方法在空时填充会话.

这是代码:

services.factory('LoginService', ['$http', 'Session', '$q',
function($http, Session, $q){
    return {
        login: function () {
            var defer = $q.defer();
            $http({method: 'GET', url: restBaseUrl + '/currentUser'})
                .success(function (data) {
                    defer.resolve(data);
                });
            return defer.promise;
        },
        isAuthenticated: function () {
            return !!Session.userLogin;
        },
        isAuthorized: function (authorizedRoles) {
            if (!angular.isArray(authorizedRoles)) {
                authorizedRoles = [authorizedRoles];
            }

            return (this.isAuthenticated() &&  authorizedRoles.indexOf(Session.userRole) !== -1);
        }
    };
}]);

myApp.service('Session', ['$rootScope',
    this.create = function (userId,userLogin, userRole, userMail, userName, userLastName, userLanguage) {
        //User info
        this.userId = userId;
        this.userLogin = userLogin;
        this.userRole = userRole;
        this.userMail = userMail;
        this.userName = userName;
        this.userLastName = userLastName;
        this.userLanguage = userLanguage;
    };

    this.destroy = function () {
        this.userId = null;
        this.userLogin = null;
        this.userRole = null;
        this.userMail = null;
        this.userName = null;
        this.userLastName = null;
        this.userLanguage = null;
        sessionStorage.clear();
    };

    return this;
}]);

myApp.config(['$routeProvider', 'USER_ROLES', function ($routeProvider, USER_ROLES) {
    $routeProvider.accessWhen = function (path, route) {
        if (route.resolve == null) {
            route.resolve = {
                user: ['LoginService','Session',function (LoginService, Session) {
                    if (!LoginService.isAuthenticated())
                        return LoginService.login().then(function (data) {
                            Session.create(data.id, data.login, data.role, data.email, data.firstName, data.lastName, data.language);
                            return data;
                        });
                }]
            }
        } else {
            for (key in route.resolve) {
                var func = route.resolve[key];
                route.resolve[key] = ['LoginService','Session','$injector',function (LoginService, Session, $injector) {
                    if (!LoginService.isAuthenticated())
                        return LoginService.login().then(function (data) {
                            Session.create(data.id, data.login, data.role, data.email, data.firstName, data.lastName, data.language);
                            return func(Session, $injector);
                        });
                    else
                        return func(Session, $injector);
                }];
            }
        }
    return $routeProvider.when(path, route);
    };

    //use accessWhen instead of when
    $routeProvider.
        accessWhen('/home', {
            templateUrl: 'partials/dashboard.html',
            controller: 'DashboardCtrl',
            data: {authorizedRoles: [USER_ROLES.superAdmin, USER_ROLES.admin, USER_ROLES.system, USER_ROLES.user]},
            resolve: {nextEvents: function (Session, $injector) {
                $http = $injector.get('$http');
                return $http.get(actionBaseUrl + '/devices/nextEvents', {
                    params: {
                        userId: Session.userId, batch: {rows: 5, page: 1}
                    },
                    isArray: true}).then(function success(response) {
                    return response.data;
                });
            }
        }
    })
    ...
    .otherwise({
        redirectTo: '/home'
    });
}]);