ui-router嵌套狀態和中間保護

Question

根據文檔 ，您可以使用自定義數據並偵聽stateChange以防止基於某些條件訪問狀態。 這可以順利運行，但我的用例是，當我進入嵌套狀態時，我想要強制執行所有后代狀態規則。

換句話說，如果我從green狀態開始並且我想最終處於blue狀態，我希望評估login規則。 目前，僅應用color規則。 有沒有辦法做到這一點？

我知道數據會被子狀態覆蓋，這就是我只看到color日志的原因。 但是擴展data而不是覆蓋data的方法是什么？

這是代碼：

var example = angular.module("example", ['ui.router']);

example.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("parent", {
            url: "/parent",
            templateUrl: "templates/parent.html",
            data: {
                rule: function () {
                    console.log("login rule checked");
                    return true;
                }
            }
        })
        .state("parent.child", {
            url: "/child",
            templateUrl: "templates/child.html",
            data: {
                rule: function () {
                    console.log("color rule checked");
                    return true;
                }
            }
        });
});


example.run(function ($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        if (!toState.data || !angular.isFunction(toState.data.rule)) return;
        var result = toState.data.rule();
        if (result) {
            event.preventDefault();
            $state.go(toState, result.params, {notify: false});
        } else {
            event.preventDefault();
        }
    })

});

Answer 1

我不確定這是不是你想要的，但這樣做：

$state.go(toState, result.params, {notify: false, reload:true});

將確保重新加載整個州，包括所有父州。 這不完全是你想要的，因為如果狀態R不是樹的頂部，它可能會重新加載超過你想要的。 但是，這應該適用於您正在顯示的示例。

有關更多信息，請參閱ui-router API 。