Dynamic layout based on roles

Question

I am building a website where the user can login .I am using materialise-css and Angularjs for front end and java-hibernate backend(using spring is not an option in my case)

The user can be admin, manager or employee. I want different views for different login roles as shown below.

For admin

For manager

and Employee

My question is:

Is it a good approach to redirect to 3 different index.html or the page can be loaded dynamically based on the roles.If dynamically can be done, how? I have read about using ng-show and ng-if. But I am not understanding how to design the page with proper alignment and all with that. Please help me with proper answer for redirect me to any useful resource. Any help would be appreciated. Thank you.

Answer 1

Yes dynamically is possible, and a much better idea for achieving what you're aiming to get out of your app.

Look into a concept called nested states or views within angular, and the module you'd use to achieve this is ui-router. Have a look at the ui-router sample app. (... as its very in depth, and covers most of the scenarios you're likely to encounter)

It'll allow you structure you app something like: (app could be an abstract view, with just general themes, context specific menus, global shared functionality, for example)

• app (index.html, app.js)
  • /admin (admin.view.html, admin.controller.js)
  • /manager (manager.view.html, manager.controller.js)
  • /employee (employee.view.html, employee.controller.js)
    • /task_type/id (employeeTask.view.html, employeeTask.controller.js)

You could go as granular as you need to logically section off your application for each purpose. I've used an angular module called angular-permission in the sample below, but there are multiple ways you can solve this, even using hooks exposed native to ui-router only, but it might require a little bit more upfront effort.

$stateProvider
    .state('app', {
        abstract: true, // an abstract state is one you can navigate to directly. its a container for child views such as a "master" page
        url: '/foo',
        template: '<ui-view/>'
    })
    .state('app.admin', {
        // url will become '/foo/admin'
        url: '/admin',
        data: {
          permissions: {
            only: ['isAdmin']
          }
        }
    })
    .state('app.manager', {
        // url will become '/foo/manager'
        url: '/manager',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager']
          }
        }
    })
    .state('app.employee', {
        // url will become '/foo/employee'
        url: '/employee',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager', 'isEmployee']
          }
        }
    })
    .state('app.employee.task', {
        // url will become '/foo/employee/sometask/1'
        url: '/:task/:id',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager', 'isEmployee']
          }
        },
        controller: function($scope, $stateParams){
          $scope.taskType = $scope.contacts[$stateParams.task];
          $scope.taskId = $scope.contacts[$stateParams.id];
        }
    })

In the above, you can see that certain routes are restricted to certain user types, you'll also have a much more modular code base and allow certain partial section to focus on only their own responsibility. eg app.employee.task would be used to display data thats only concerns itself with employee tasks. (as opposed to having a monolith html display all page)