angularJS multiple Master pages based on Role

Question

The requirement of the application is to show different options based on the Role of the user. Like

If role is Admin , the after logging in , the user needs to be shown a master page which has link for Option 1, Option 2 and Option 3.
If the role is Operator , after logging in , the user needs to be shown a master page which has link for Option 4 and Option 5.

Any Idea how to achieve this ?. I am using token based authentication. I am using ng-view. Here is my config settings.

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"
        });


});

Upon successful login is where you'd need to do the routing http://stackoverflow.com/questions/23429055/angularjs-ui-router-load-template-and-controller-based-on-user-role?rq=1 — Ronnie, Dec 12 '16 at 19:50

Arter · Accepted Answer · 2016-12-13T14:35:45.370

You can make function in index ctrl

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

And on every div you can make check with ng-if

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

In this case, ng-if is better than ng-hide/show, because ng-if completly remove from DOM. And, if you use ng-hide/show... someone can very easy change code in console and get data.

EDIT:

Do you have a defined service from which you'll browse user roles? From tokens can extract user roles ... this is how to decode tokens

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;
    }
 }]);

Now, after the login you can check that the user is logged in, which user has a role. Then fulfilling check if the ADMIN, and you let him see the parts that only admin can see.

I am writing in a hurry so please pay attention to the brackets

I added the code
test div
in Index.html which is linked to controller IndexController. In side IndexController I added the code just for testing $scope.isAdmin = function () { $log.debug('IsAdmin called'); return true; } But the IsAdmin function never gets called . Any idea why ? — bp581, Dec 13 '16 at 14:19
Arter , can you help me with my above question. isAdmin function is not getting called. I am kind of newbie to angularjs . — bp581, Dec 13 '16 at 15:55
Thanks Arter...I found the issue and resolved it. It works now. — bp581, Dec 20 '16 at 18:24

score 0 · Answer 2 · answered Dec 12 '16 at 20:08

There is two ways you could do this:

Hidden elements: Hide the elements that are not relevant using ng-if.The links would look like ng-if="isRole('Admin')" on options 1,2 and 3. Then ng-if="isRole('Operator')" on options 4 and 5.
Different Routes: Have separate routes for the admin and operator. so you have '/homeAdmin' and '/homeOp'

angularJS multiple Master pages based on Role

2 Answers2