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

1. 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.

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


});

Answer 1

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

Answer 2

There is two ways you could do this:

1. 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.

2. Different Routes: Have separate routes for the admin and operator. so you have '/homeAdmin' and '/homeOp'