Role Based UI in Angular 2

Question

I am developing an application in angular 2 with asp.net mvc 5 in which there are two kind of user one is super admin other is admin. I want to show all functionalities to super admin but I need to show some of its functionalities to the admin. Now I want to ask that first what is the best practice for doing this and how I can achieve it and any sample example is there because I can't find it according to my requirements.

Image

for example If user logged in it redirect to this page. If the user is 'admin' then it show just table and if the user is 'super admin' then it show invite button as well as table too.

Answer 1

you need to roll your own mvc5 server side solution, you may find many examples on the internet, using extended methods like the following, you are able to check permissions via razor/c# and it will output html with the proper angular markup based on the user/role.

public static bool UserHasPermission(this ControllerBase controller, string permissionString)
{
    bool permissionFound = false;
    try
    {
        permissionFound = new RoleUserCheck(controller.ControllerContext.HttpContext.User.Identity.Name).UserHasPermission(permissionString);
    }
    catch { }
    return permissionFound;
}

then on your partial/view you may access the function via razor markup.

@{
if (ViewContext.Controller.UserHasPermission("DeleteWithPaymentRollback"))
{
    <button type="button" (click)="showconfirm()" class="btn btn-danger btn-xs">
        <span class="fa fa-recycle"></span>
    </button>
}}