angularJS基于角色的多个Master页面

Posted 2023-02-27

【中文标题】angularJS基于角色的多个Master页面

【英文标题】：angularJS multiple Master pages based on Role

【发布时间】：2017-04-27 17:45:52

【问题描述】：

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

如果角色是 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"
        );


);

【问题讨论】：

成功登录后，您需要进行路由***.com/questions/23429055/…

【参考方案1】：

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

隐藏元素：使用 ng-if 隐藏不相关的元素。选项 1,2 和 3 上的链接看起来像 ng-if="isRole('Admin')"。然后是 ng-if ="isRole('Operator')" 选项 4 和 5。

不同的路由：管理员和操作员有不同的路由。所以你有'/homeAdmin'和'/homeOp'

【参考方案2】：

你可以在 index 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;
    
 ]);

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

我写的很匆忙，请注意括号

【讨论】：

我在 Index.html 中添加了代码 test div ，它链接到控制器 IndexController。在 IndexController 中，我添加了仅用于测试的代码 $scope.isAdmin = function () $log.debug('IsAdmin called');返回真；但是 IsAdmin 函数永远不会被调用。知道为什么吗？

Arter，你能帮我解决我上面的问题吗？ isAdmin 函数没有被调用。我是 angularjs 的新手。

感谢 Arter...我找到了问题并解决了。现在可以了。