Как предотвратить доступ к состояниям через кнопки браузера назад/вперед

Question

Мое приложение имеет три состояния: A, B, C. Состояние A запрашивает аутентификацию. Если мы успешно вошли в систему, переходим к состоянию B (то есть A->b). Затем мы можем перейти к C из этого состояния. Но, если мы выходим из состояния C, мы перенаправляем в состояние A, поскольку B и C страниц требуют аутентификации. Но, когда мы нажимаем кнопки «Назад» браузера, доступны B и C. Я хочу удалить эти состояния из кнопок браузера назад/вперед.

Я использую ui-router. Я использовал $stateChangeStart для распознавания тех страниц, для которых требуется аутентификация, и остановился для доступа к этим страницам. Но это решение выглядит неправильно. Есть ли способ сделать это, используя управление историей или что-то еще.

Пример кода:

Мои маршруты:

$stateProvider 
    .state('account', { 
      url: '/account', 
      params: {isStateAuthorized: false}, 
      views: { 
       'mainView@':{ 
        templateUrl: 'pages/dashboard/dashboard.html', 
        controller: 'accountController' 
       } 

      } 
    }) 
    .state('account.accountDetails', { 
      url: '/:accountType', 
      params: {isStateAuthorized: false}, 
      views: { 
       'mainView@':{ 
        templateUrl: 'account/details/account-details.html', 
        controller: 'accountDetails'      
       } 
      } 
    }) 
    .state('account.accountRegister', { 
      url: '/:accountType/register', 
      params: {isStateAuthorized: false}, 
      views: { 
       'mainView@':{ 
        templateUrl: 'account/registration/registration.html', 
        controller: 'registrationController' 
       } 
      } 

    }) 

У меня есть некоторые другие маршруты тоже как 'войти в систему' и т.д ..

В .run методе:

$rootScope.$on('$stateChangeStart', function(event, toState , toParams, fromState, fromParams) 
    { 
     if(toState.params.isStateAuthorized === true && !$rootScope.isAppLog) { 
      event.preventDefault(); 
      $state.go('login'); 
     } 
    }); 

Я проверяю, требует ли состояние аутентификации или не использует isStateAuthorized в params каждого состояния.

Спасибо.

Answer 1

Я не уверен, что событие в ui-router поддерживает тот же API, что и общие события ui.

Хотя можно использовать события изменения состояния для проверки статуса авторизации и изменения в каком-либо другом состоянии, если состояние неверно, оно не очень надежное и может создавать некоторые нежелательные эффекты в истории, например.

Чистым способом является использование атрибута разрешения для состояния, чтобы убедиться, что авторизация присутствует.

$stateProvider.state('some_state_that_needs_auth', { 
    ... other state properties ... 
    resolve:{ 
     $state:'$state', 
     authSvc:'authService', 
     isAuthorized:function($state, authSvc){ 
      if(!authSvc.isAuthenticated()){ 
       $state.go('login'); 
      } 
     } 
    } 
})