angularJS 基于角色的多个母版页

Question

应用程序的要求是根据用户的角色显示不同的选项。喜欢

如果角色是管理员，登录后，需要向用户显示一个母版页，其中包含 link 选项 1、选项 2 和选项 3。
如果角色是操作员，登录后，需要向用户显示一个母版页，其中包含选项 4 和选项 5 的 link。

知道如何实现吗？。我正在使用基于令牌的身份验证。我正在使用 ng-view。这是我的配置设置。

angularSupplierCTQApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "App/Home/Home.html",
            controller: "HomeController"
        })
        .when("/login", {
            templateUrl: "App/Login/loginTemplate.html",
            controller: "LoginController"
        })
        .otherwise({
            redirectTo: "/login"
        });


});

Answer 1

有两种方法可以做到这一点：

隐藏元素：使用 ng-if.The 链接隐藏不相关的元素，在选项 1、2 和 3 上看起来像 ng-if="isRole('Admin')"。然后ng-if="isRole('Operator')" 选项 4 和 5.
不同的路线：为管理员和操作员提供不同的路线。所以你有 '/homeAdmin' 和 '/homeOp'

Answer 2

您可以在索引 ctrl 中创建函数

$scope.IsAdmin = function(){
return $scope.authentication.role ==     "admin";
}

并且在每个 div 上你可以使用 ng-if

进行检查

<div ng-if="isAdmin()">test div<\div>

在这种情况下，ng-if 优于 ng-hide/show，因为 ng-if 完全从 DOM 中删除。而且，如果您使用 ng-hide/show... 有人可以很容易地在控制台中更改代码并获取数据。

编辑：

您是否有可从中浏览用户角色的已定义服务？从令牌中可以提取用户角色...这是解码令牌的方法

app.factory('authService', ['$http', '$sessionStorage', '$q', 'localStorageService', 'ngAuthSettings',
function ($http, $localStorage, $q, localStorageService, ngAuthSettings, $resource, $rootScope, $location) {

    var serviceBase = ngAuthSettings.apiServiceBaseUri;
    var authServiceFactory = {};

    var _authentication = {
        isAuth: false,
        username: "",
        role: "",
        userID: ""
                //useRefreshTokens: false
    };
function urlBase64Decode(str) {
        var output = str.replace('-', '+').replace('_', '/');
        switch (output.length % 4) {
            case 0:
                break;
            case 2:
                output += '==';
                break;
            case 3:
                output += '=';
                break;
            default:
                throw 'Illegal base64url string!';
        }
        return window.atob(output);
    }

    function getUserRoleFromToken(t) {

        var user = getUserFromToken(t);
        return user.role;
    }
 }]);

现在，登录后您可以检查用户是否已登录，哪个用户具有角色。然后完成检查ADMIN，你让他看到只有admin可以看到的部分。

写的比较匆忙，请注意括号

angularJS 基于角色的多个母版页

angularJS multiple Master pages based on Role

angularjs

angular-ui-router

master-pages

role