ограничен URL ui.router в Angularjs

Question

Проблема Вопрос,

Я после того, как ограничение URL, который может быть перемещаться только после того, как процесс был закончен. Более реалистичным примером является тележка и выезд.

Корзина (нажмите на кнопку для оформления заказа) ----> Checkout (страница может быть просмотрена только после нажатия кнопки). В настоящее время, если я зарегистрирую URL-адрес моей учетной записи с помощью $ stateProvider, он может быть просмотрен через URL-адрес.

Как бы это ограничило?

Любая идея о том, как это сделать в угловом и ui-router? Любая помощь очень ценится

Answer 1

Сообщите мне, если я правильно понял ваш вопрос.

У вас есть определенный URL-адрес, который вы посещаете, чтобы просмотреть свою корзину покупок. Вы хотели бы иметь его, чтобы просмотреть корзину, если вы нажмете кнопку. Это означает, что если вы должны посетить URL-адрес, где находится корзина, что он ничего не отобразит.

Если это так, то ответ довольно прост.

В вашем представлении shoppingcartController вы хотите установить ng-show = 'cartActive'. Это означает, что тележка покажет себя, только если переменная cartActive правдива. Теперь у вас может быть установленная для переменной cartActive значение true.

Если вы пытались посетить URL-адрес конечной точки, не нажимая кнопку, у cartActive должно быть установлено значение false по умолчанию.

Дайте мне знать, если это ответит на ваш вопрос!

Answer 2

Вы можете легко ограничить URL, прослушивая событие stateChange, которое запускается из корневого каталога. Так позволяет сказать, что у вас есть OrderService со свойством называется hasPayed и государством по имени ограничен:

angular.module('tv').run(function($rootScope, OrderService) { 
    $rootScope.$on('$stateChangeStart', function (event, next, nextParams, prev, prevParams) { 
     if (next.name === 'restricted') { 
      if (!OrderService.hasPayed) { 
       event.preventDefault(); 
       $state.go(prev.name, prevParams); //send to previous 
       $state.go('other'); //send to some other state 
      } 
     } 
    }); 
}); 

https://github.com/angular-ui/ui-router/wiki#state-change-events

Answer 3

Я использую следующие решения в своих проектах:

Определить глобальный контроллер и реагировать в случае изменения состояния:

//GLOBAL controller 
    angular.module("app.controllers").controller("GlobalController", ["$rootScope", "$state", 
      //Check state authentication 
      $rootScope.$on("$stateChangeStart", function(event, toState) { 
       if (toState.data.public === false && !($rootScope.user)) { 
        event.preventDefault(); 
        $state.go("login"); 
       } 
      }); 
     } 
    ]); 

в каждом состоянии использовать пользовательские данные атрибут data.public для предотвращения несанкционированного доступа:

angular.module("app").config(["$stateProvider", function($stateProvider){ 
    $stateProvider.state("login", { 
     url: "/login", 
     templateUrl: "loginTpl.html", 
     controller: "LoginCtrl", 
     data: { 
      public: true 
     } 
    }); 
}]); 

При успешной регистрации, установите $ rootScope.user к соответствующему объекту пользователя!

Edit: Для вашего конкретного случая использования, вы можете использовать URL-адрес Params (выписка отправитель = телеги?), Чтобы решить эту проблему. В вашем использовании контроллера оформления заказа следующие:

if($stateParams.sender == "cart") 
    //ok 
}else{ 
    $state.go("cart"); 
} 

В кнопке вашей корзине:

ui-sref="checkout({sender: 'cart'})"