AngularJs - скасувати подію зміни маршруту


88

Як скасувати подію зміни маршруту в 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 (), але ніякої користі.

Відповіді:


184

Замість $routeChangeStartвикористання$locationChangeStart

Ось дискусія про це від хлопців angularjs: https://github.com/angular/angular.js/issues/2109

Змінити 06.03.2018 Ви можете знайти це в документації: https://docs.angularjs.org/api/ng/service/$location#event-$locationChangeStart

Приклад:

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

8
Проблема в тому, що немає можливості отримати доступ до збору параметрів маршруту. Якщо ви намагаєтесь перевірити параметри маршруту, це рішення не годиться.
KingOfHypocrites

1
Зверніть увагу, що при використанні $routeChangeStartв nextзмінної це просто рядок , і вона не може містити будь - яких даних (наприклад , ви не можете отримати доступ до визначеної раніше authorizedRolesзмінної)
MyTitle

@KingOfHypocrites ти не можеш отримати параметри маршруту, але ти можеш отримати $location.path()і$location.search()
Дизайн Adrian

2
Чи можете ви / чи доцільно робити це на rootScope, якщо ви хочете відстежувати всі зміни маршруту? Або є більш приємна альтернатива?
maxm

38

Більш повний зразок коду, використовуючи $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); 
      });
    }
  );

Я не зовсім задоволений підключенням цього до мого кореневого контролера (контролера верхнього рівня). Якщо є кращий зразок, я хотів би знати. Я новачок у angular :-)


Для мене це чудово працювало, хоча я не намагаюся скасувати зміну маршруту, як плакат orig. Дякую!
Jim Clouse

4
Так, проблема з rootScope полягає в тому, що ви повинні пам’ятати про те, щоб розв’язати цей обробник, коли ваш контролер зникне.
загублений переклад

12

Рішенням є трансляція події "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). Мої веб-служби не є справді без громадянства, але я вважав за краще, щоб цей знаменитий фреймворк керував моєю безпекою.
  2. isAuthenticated () просто шукати, якщо клієнтська сесія заповнена даними, це означає, що вона була автентифікована раніше (*)
  3. Права доступу обробляються isAuthorized () (поза цією темою).

(*) Мій сеанс заповнюється при зміні маршруту. Я перевизначив метод then (), щоб заповнити сеанс, якщо він порожній.

Ось код:

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

Скажіть, будь ласка, що повертається LoginService.isAuthenticated()при завантаженні першої сторінки? Як ти зберігаєш currentUser? Що станеться, якщо користувач оновить сторінку (користувачеві потрібно знову ввести облікові дані)?
MyTitle

Я додав більше інформації про LoginService у своїй оригінальній відповіді. CurrentUser надається сервером, а зміна маршруту обробляє будь-яке оновлення сторінки, тому користувачеві не потрібно входити знову.
Астерій,

4

Для тих, хто натрапляє на це, є давнє запитання (принаймні в кутовій версії 1.4) ви можете зробити це:

 .run(function($rootScope, authenticationService) {
        $rootScope.$on('$routeChangeStart', function (event, next) {
            if (next.require == undefined) return

            var require = next.require
            var authorized = authenticationService.satisfy(require);

            if (!authorized) {
                $rootScope.error = "Not authorized!"
                event.preventDefault()
            }
        })
      })

6
Цікаво, ви отримуєте додаткову плату за використання брекетів або ";"?
cel sharp

6
@MatthiasJansen, звичайно. І на довершення всього, брекети рахують подвійно, а крапка з комою - потрійне.
Акос Вандра

1

Це моє рішення, і воно працює для мене, але я не знаю, чи я на правильному шляху, тому що я новачок у веб-технологіях.

var app = angular.module("app", ['ngRoute', 'ngCookies']);
app.run(function($rootScope, $location, $cookieStore){
$rootScope.$on('$routeChangeStart', function(event, route){
    if (route.mustBeLoggedOn && angular.isUndefined($cookieStore.get("user"))) {
        // reload the login route
        jError(
             'You must be logged on to visit this page',
             {
               autoHide : true,
               TimeShown : 3000,
               HorizontalPosition : 'right',
               VerticalPosition : 'top',
               onCompleted : function(){ 
               window.location = '#/signIn';
                 window.setTimeout(function(){

                 }, 3000)
             }
        });
    }
  });
});

app.config(function($routeProvider){
$routeProvider
    .when("/signIn",{
        controller: "SignInController",
        templateUrl: "partials/signIn.html",
        mustBeLoggedOn: false
});

2
Як ви можете відповісти на запитання, якщо не впевнені у своїй відповіді?
deW1,

Я впевнений, що це працює. Я не впевнений, чи це правильно. Якщо у вас є краще рішення, я хотів би його побачити.
Александракіс Олександрос

1

я знайшов це доречним

var myApp = angular.module('myApp', []);

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes  
$rootScope.error = "Not authorized!"
                event.preventDefault()   
    });
});

мій пост може комусь допомогти в майбутньому.


1
var app=angular
    .module('myapp', [])
    .controller('myctrl', function($rootScope) {
        $rootScope.$on("locationChangeStart", function(event, next, current) {
        if (!confirm("location changing to:" + next)) { 
            event.preventDefault();
        }
    })
});

2
Незважаючи на те, що цей фрагмент коду може вирішити питання, включення пояснення дійсно допомагає поліпшити якість вашої публікації. Пам’ятайте, що ви будете відповідати на запитання для читачів у майбутньому, і ці люди можуть не знати причин вашої пропозиції коду.
dpr

0

Якщо вам потрібно зупинити зміну маршруту у $routeChangeStartвипадку (тобто ви хочете виконати якусь операцію на основі наступного маршруту ), введіть $routeі внутрішній $routeChangeStartдзвінок:

$route.reload()

1
Я сподівався, але в Angular 1.2.7 на Chrome це, здається, викликає цикл JS і сторінка зависає.
Nick Spacek

1
@NickSpacek Умова, при якій ви телефонуєте, $route.reload()повинна бути іншою, інакше він знову запускає той самий код. Це еквівалентно створенню whileциклу з trueумовою.
Kevin Beal

0

Просто для того, щоб поділитися, у моєму випадку я хочу відкласти вирішення маршруту за допомогою $ routeChangeStart. У мене є SomethingService, який повинен завантажитися до початку розв’язання маршруту (так, балакучий додаток), отже, я обіцяю чекати. Можливо, я знайшов хакер ... Дозвіл маршруту помиляється, якщо рішення повертає відхилення. Я зламав конфігурацію розв’язання, а потім виправляю її.

    var rejectingResolve = {
        cancel: function ($q){
            // this will cancel $routeChangeStart
            return $q.reject();
        }
    }
    
    $rootScope.$on("$routeChangeStart", function(event, args, otherArgs) {
        var route = args.$$route,
            originalResolve = route.resolve;
    
        if ( ! SomethingService.isLoaded() ){

            SomethingService.load().then(function(){
                // fix previously destroyed route configuration
                route.resolve = originalResolve;
                
                $location.search("ts", new Date().getTime());
                // for redirections
                $location.replace();
            });

            // This doesn't work with $routeChangeStart: 
            // we need the following hack
            event.preventDefault();
            
            // This is an hack! 
            // We destroy route configuration, 
            // we fix it back when SomethingService.isLoaded
            route.resolve = rejectingResolve;
        } 
    });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.