角1.2的熱毛巾，玩菜單

Question

               Hi all,

環境：vs 2013 Express for Web，熱毛巾角1.2，Breeze.WebApi2，SQL Server 2012 Express。

我希望能夠在Web應用程序的菜單中添加或刪除項目，這可能嗎？

我看過config.route.js，其中菜單是由getRoutes（）構建並返回的：

function getRoutes() {

    var rts = [
        {
            url: '/',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 2,
                    content: '<i class="fa fa-dashboard"></i> Dashboard'
                }
            }
        },
        {
            url: '/admin',
            config: {
                title: 'admin',
                templateUrl: 'app/admin/admin.html',
                settings: {
                    nav: 6,
                    content: "<i class='fa fa-dashboard'></i> GUIGUI's Homepage"
                }
            }
        }, {
            url: '/register',
            config: {
                title: 'register',
                templateUrl: 'app/register/register.html',
                settings: {
                    nav: 4,
                    content: '<i class="fa fa-lock"></i> Register'
                },
                visible: false
            }
        }, {
            url: '/login',
            config: {
                title: 'login',
                templateUrl: 'app/login/login.html',
                settings: {
                    nav: 5,
                    content: '<i class="fa fa-lock"></i> Login'
                }
            }
        }, {
            url: '/',
            config: {
                title: 'Client',
                templateUrl: 'app/client/client.html',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-dashboard"></i> client'
                }
            }
        }, {
            url: '/mission',
            config: {
                title: 'Mission',
                templateUrl: 'app/mission/mission.html',
                settings: {
                    nav: 7,
                    content: '<i class="fa fa-lock"></i> mission'
                }
            }
        }
        , {
            url: '/uploadFile',
            config: {
                title: 'uploadFile',
                templateUrl: 'app/uploadFile/uploadFile.html',
                settings: {
                    nav: 8,
                    content: '<i class="fa fa-lock"></i> uploadFile'
                }
            }
        }
    ];

    return rts;
}

（該應用程序以Client開頭）。

我已經創建了一個身份驗證服務來了解當前用戶（如果有一個已登錄的用戶）。

我的問題是：更新菜單在哪里更明智？

我認為config.route.js在一開始就加載一次。

我的目的是根據用戶是否登錄來向菜單添加或刪除項目，可能嗎？

在哪里注入authenticationService來更新菜單？

Answer 1

我找到了一個解決方案，相當簡單。

與其在菜單中添加或刪除項目（ 路由 ，我認為這是不可能的），不如在其可見性上播放，您可以向菜單項添加屬性（可見，索引，...，隨便什么） ，例如，您可以執行此操作（位於config.route.js中 ）：

        var persistantRoutes = [
            {
                url: '/await',
                config: {
                    title: '',
                    templateUrl: 'app/await/await.html',
                    settings: {
                        nav: 1,
                        content: "",
                        index: 0,
                        visible: false
                    }
                }
            }, {
                url: '/reinit',
                config: {
                    title: '',
                    templateUrl: 'app/reinit/reinit.html',
                    settings: {
                        nav: 2,
                        content: "",
                        index: 0,
                        visible: false
                    }
                }
            }, {
    ...

routes = persistantRoutes;

在菜單的視圖模型中（以我為例 ： sidebar.js ），您可以執行以下操作：

function activate() {
    authenticationService.checkAuthentication().then(getNavRoutes);
}

function getNavRoutes() {
    vm.navRoutes = routes.filter(function (r) {

        if (authenticationService.currentUser.isAuthenticated) {
            switch (r.config.title) {
                case "login":
                case "register":
                    r.config.settings.visible = false;
                    break;
                case "userHomePage":
                    r.url = "/";
                    r.config.settings.visible = true;
                    r.config.settings.nav = 3;
                    break;
                case "FGHomePage":
                    r.url = "/FGHomePage";
                    r.config.settings.nav = 4;
                    break;
            }
        }
        else {
            switch (r.config.title) {
                case "login":
                case "register":
                    r.config.settings.visible = true;
                    break;
                case "userHomePage":
                    r.url = "/userHomePage";
                    r.config.settings.visible = false;
                    r.config.settings.nav = 4;
                    break;
                case "FGHomePage":
                    r.url = "/";
                    r.config.settings.nav = 3;
                    break;
            }
        }

        if (r.config.settings.visible == true) {
            return r.config.settings && r.config.settings.nav;
        }
    }).sort(function (r1, r2) {
        return r1.config.settings.nav - r2.config.settings.nav;
    });
}

我已經完成了一項服務：authenticationService，該服務使您可以知道當前用戶是否已通過身份驗證，知道您可以呈現菜單項。

我認為這很簡單。

問候。

Answer 2

{
        url: '/login',
        config: {
            title: 'login',
            templateUrl: 'app/login/login.html',
            settings: {
            }
        }
    }

如果從設置中刪除導航（也可以刪除內容），則問題已得到解決。