可以用angular的ui-router来限制直接URL导航

Possible to restrict direct URL navigation with Angular's ui-router?

本文关键字：URL 导航 angular ui-router      更新时间：2023-09-26

我想改变状态并从我的/cart导航到我的/checkout状态，但不允许我的用户在他们的浏览器中直接导航到/checkout。这可能吗?

当前设置如下:

ui-router 

    .state('cart', {
        url: '/cart',
        templateUrl: './views/cart.html',
        controller: 'CartCtrl',
        title: "Shopping Cart",
        requiresLogin: false
    })
    .state('checkout', {
        url: '/checkout',
        templateUrl: './views/checkout.html',
        controller: 'UserCtrl',
        title: "Checkout",
        requiresLogin: false
    })

控制器:

    $scope.goToCheckout = function(){
        $state.go('checkout');
    }

当有人直接导航到一个页面时，他们是从一个空状态导航到由URL定义的状态。您可以使用这个事实来阻止导航到checkout。

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
  if (fromState.name === '' && toState.name === 'checkout') {
    event.preventDefault();
    $state.go('cart');
  }
});
相关文章：