Remove Role Base Authentication

How to remove role-based authentication from all page.

Temporary Disable Role-Based Authentication

To temporarily disable authentication, modify the role-based access in the following files.

Step 1: Update app-routing.module.ts and navigation.ts

Before:

data: { roles: [Role.Admin, Role.User] }

After:

data: { roles: [Role.Admin] }This ensures that all users are treated as Admin, bypassing role-based restrictions.

This ensures that all users are treated as Admin, bypassing role-based restrictions.

---

Remove Role Base Authentication Permanent

To remove authentication permanently, follow these steps.

Step 1: Remove Role Import

Open src/app/app-routing.module.ts and src/app/theme/layout/admin/navigation/navigation.ts and remove the following import:

import { Role } from './theme/shared/_helpers/role';

Step 2: Remove Role-Based Data Restrictions

Find and remove:

data: { roles: [Role.Admin, Role.User] }

data: { roles: [Role.Admin] }

Step 3: Modify auth.guard.ts to Remove Authorization Check

Open src/app/theme/shared/_helpers/auth.guard.ts and delete this block:

const { roles } = route.data;
if (roles && !roles.includes(currentUser.user.role)) {
    // User not authorized, redirect to unauthorized page
    this.router.navigate(['/unauthorized']);
    return false;
}

Step 4: Modify nav-content.component.ts to Remove Role Filtering

Open src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts

Before:

constructor() {
    // this.navigations = NavigationItems;
    this.currentLayout = BerryConfig.layout;
}

// Life cycle events
ngOnInit() {
    if (this.windowWidth < 1025) {
        setTimeout(() => {
            (document.querySelector('.coded-navbar') as HTMLDivElement).classList.add('menupos-static');
        }, 500);
    }
    const currentUser = this.authenticationService.currentUserValue;
    const userRoles = currentUser?.user.role ? [currentUser.user.role] : [Role.Admin];
    this.navigations = this.filterMenu(NavigationItems, userRoles);
}

After:

constructor() {
    this.navigations = NavigationItems;
    this.currentLayout = BerryConfig.layout;
}

// Life cycle events
ngOnInit() {
    if (this.windowWidth < 1025) {
        setTimeout(() => {
            (document.querySelector('.coded-navbar') as HTMLDivElement).classList.add('menupos-static');
        }, 500);
    }
}

Step 5: Remove Role-Based UI Restrictions

Modify nav-collapse.component.html

Remove the following attributes:

[ngClass]="{ disabled: !isEnabled }"
ngbTooltip="{{ !isEnabled ? 'You do not have permission to access this page ' : '' }}"
[parentRole]="item().role && item().role.length > 0 ? item().role : parentRole()"

Modify nav-group.component.html

Delete lines 7 and 9:

[parentRole]="item().role"

Modify nav-item.component.html

Before:

<li
    [ngClass]="item().classes!"
    [routerLinkActive]="['active']"
    ngbTooltip="{{ !isEnabled ? 'You do not have permission to access this page ' : '' }}"
>
    <a
        class="nav-link"
        [target]="item().target ? '_blank' : '_self'"
        [ngClass]="{ disabled: !isEnabled }"
        [routerLink]="[item().url]"
        (click)="closeOtherMenu($event)"
    >
        @if (!isEnabled) {
            <span class="coded-micon" [ngClass]="{ disabled: !isEnabled }">
                <i class="ti ti-lock"></i>
            </span>
        } @else {
            <ng-container *ngTemplateOutlet="itemIcon"></ng-container>
        }
        @if (item().icon) {
            <span class="coded-mtext">{{ item().title | translate }}</span>
        } @else {
            @if (!isEnabled) {
                <span class="coded-micon" [ngClass]="{ disabled: !isEnabled }">
                    <i class="ti ti-lock"></i>
                </span>
            }
            {{ item().title | translate }}
        }
    </a>
</li>

After:

<li
    [ngClass]="item().classes!"
    [routerLinkActive]="['active']"
>
    <a
        class="nav-link"
        [target]="item().target ? '_blank' : '_self'"
        [routerLink]="[item().url]"
        (click)="closeOtherMenu($event)"
    >
        <ng-container *ngTemplateOutlet="itemIcon"></ng-container>
        @if (item().icon) {
            <span class="coded-mtext">{{ item().title | translate }}</span>
        } @else {
            {{ item().title | translate }}
        }
    </a>
</li>

This removes tooltips and disables restrictions on menu items.

Step 6: Modify Login Page UI

Open src/app/demo/pages/authentication/authentication-v1/v1-login/v1-login.component.html and remove:

<ul class="nav nav-tabs admin-role d-block">
   <div class="row g-2">
        @if (!this.authenticationService.isLoggedIn()) {
            @for (role of roles; track role.role) {
                <div class="col-sm-6">
                    <li class="nav-item">
                        <a href="javascript:" class="nav-link" [class.active]="selectedRole === role" (click)="onSelectRole(role)">
                            {{ role.name }}
                        </a>
                    </li>
                </div>
            }
        }
    </div>
</ul>

📌 This removes the role selection UI.