Creating Separate UI for different Roles

Question

I have two roles in my application say Customer and Provider and I want to create separate UI for them after they are authenticated, keeping login screen same and have a radio button that says "I'm a Customer" and "I'm a Provider", this also be same during registration.

I'm looking for a better approach, I have no Idea how to start with.

I already have a an existing UI interface for customers, but now requirement is for "Provider" Interface. So that customer can interact , send requirements, do query directly with provider. currently Customer application send these request by email.

Answer 1

First of all you should detect and define which components are going to be shown for both and which components are only for one or other. After you know exactly how your app will be, angularjs provides a lot of native directives for managing different cases.

Take a look at:

ng-if ng-switch ng-hide ng-show

Those will be of great help for you. But always remember to manage security server side, web apps can be easily manipulated and if you are working with roles and different permissions take this as a must have.

BTW, consider using angularjs $routeProvider in some of the following ways for managing permissions:

    $routeProvider.when('/admin/users', {
        controller: 'userListCtrl',
        templateUrl: 'js/modules/admin/html/users.tmpl.html',
        access: {
            requiresLogin: true,
            requiredPermissions: ['Admin', 'UserManager'],
            permissionType: 'AtLeastOne'
    });

OR

    $routeProvider.
        when('/admin', {
            templateUrl: 'Your template url',
            controller: 'AdminController',
            permission: 'AccessAdministration',
            resolve: {
                permissionList: function (permissionService) { return permissionService.getPermissions(); }
        }
    })