Question

enter image description here 问题，

我在限制只能在流程完成后导航到的URL。更现实的例子是购物车和结账。

购物车（点击按钮结帐）----＆gt;结帐（只有在点击按钮后才能查看页面）。目前，如果我使用$ stateProvider注册我的/ checkout URL，则可以通过URL查看。

我如何限制这个？

关于如何在Angular和ui-router中执行此操作的任何想法？非常感谢任何帮助

Answer 1

您可以通过侦听从rootscope触发的stateChange事件来轻松限制URL。因此，假设您有一个名为hasPayed的属性的orderervice和一个名为restricted的状态：

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 2

我在我的项目中使用以下解决方案：

定义全局控制器并对状态更改事件做出反应：

//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设置为相应的用户对象！

修改对于您的特定用例，您可以使用url params（checkout？sender = cart）来解决问题。在结帐控制器中使用以下内容：

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

在购物车按钮中：

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

Answer 3

如果我理解你的问题，请告诉我。

您有一个特定的网址，您可以访问该网址来查看您的购物车。您希望拥有它，以便只有单击按钮才能查看购物车。这意味着如果您要访问购物车所在的URL，它将不会显示任何内容。

如果是这样，答案很简单。

在shoppingcartController视图中，您要设置ng-show =＆＃39; cartActive＆＃39;。这意味着只有变量cartActive是真实的，购物车才会显示自己。现在您可以使用按钮将cartActive变量设置为true。

如果您尝试在不单击按钮的情况下访问端点URL，则默认情况下应将cartActive设置为false。

如果这回答了你的问题，请告诉我！

Angularjs中受限制的URL ui.router

3 个答案: