Question

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

如果角色为Admin，则登录后，需要向用户显示包含选项1，选项2和选项3链接的母版页。
如果角色是操作员，则在登录后，需要向用户显示包含选项4和选项5链接的母版页。

任何想法如何实现这一目标？我正在使用基于令牌的身份验证我正在使用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

您可以在索引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的检查，你让他看到只有管理员才能看到的部分。

我匆忙写作所以请注意括号

Answer 2

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

隐藏元素：使用ng-if隐藏不相关的元素。链接看起来像ng-if =＆＃34; isRole（＆＃39; Admin＆＃39;）＆＃34;选项1,2和3.然后ng-if =＆＃34; isRole（＆＃39;运算符＆＃39;）＆＃34;选项4和5。
不同的路由：为管理员和运营商提供单独的路由。所以你有＆＃39; / homeAdmin＆＃39;和＆＃39; / homeOp＆＃39;

angularJS基于角色的多个母版页

2 个答案: