🚫Remove Role Base Authentication

How to remove role-based authentication from all page.

Temporarily 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 menu.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/demo/data/menu.ts and remove the following import:

import { Role } from 'src/app/@theme/types/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/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 menu-collapse.component.ts to Remove Role Filtering

Open src/app/@theme/layouts/menu/vertical-menu/menu-collapse/menu-collapse.component.ts

Before:

  readonly item = input<NavigationItem>();

  ngOnInit(){
  ...
    /**
     * current login user role
     */
    const currentUserRole = this.authenticationService.currentUserValue?.user.role || Role.Admin;

    /**
     * items parent role
     */
    const parentRoleValue = this.parentRole();

    if (this.item()!.role && this.item()!.role!.length > 0) {
      if (currentUserRole) {
        const parentRole = this.parentRole();
        const allowedFromParent =
          this.item()!.isMainParent || (parentRole && parentRole.length > 0 && parentRole.includes(currentUserRole));
        if (allowedFromParent) {
          this.isEnabled = this.item()!.role!.includes(currentUserRole);
        }
      }
    } else if (parentRoleValue && parentRoleValue.length > 0) {
      // If item.role is empty, check parentRole
      if (currentUserRole) {
        this.isEnabled = parentRoleValue.includes(currentUserRole);
      }
    }
  }

After:

readonly item = input<NavigationItem>

Step 5: Remove Role-Based UI Restrictions

Modify menu-collapse.component.html

Remove the following attributes:

[ngClass]="{ disabled: !isEnabled }"
matTooltip="{{ !isEnabled ? 'Logout and Login with Admin to view this page ' : '' }}"

[parentRole]="item()!.role && item()!.role!.length > 0 ? item()!.role : parentRole.role"

Modify menu-group.component.html

Delete lines 7 and 9:

[parentRole]="item().role"

Modify menu-item.component.html

Before:

<li
      [ngClass]="item().classes!"
      [routerLinkActive]="['active']"
      matTooltip="{{ !isEnabled ? 'Logout and Login with Admin to view this page ' : '' }}"
    >
      <a
        class="nav-link"
        [target]="item().target ? '_blank' : '_self'"
        [ngClass]="{ disabled: !isEnabled }"
        [routerLink]="[item().url]"
        (click)="toggleMenu($event)"
        [routerLinkActive]="['active']"
      >
        @if (!isEnabled) {
          <span class="coded-micon">
            <svg class="pc-icon">
              <use xlink:href="assets/fonts/custom-icon.svg#custom-lock"></use>
            </svg>
          </span>
        } @else {
          @if (item().icon) {
            <span class="coded-micon">
              <svg class="pc-icon">
                <use attr.xlink:href="assets/fonts/custom-icon.svg{{ item().icon }}"></use>
              </svg>
            </span>
          }
        }
        @if (item().icon) {
          <span class="coded-mtext">{{ item().title | translate }}</span>
        } @else {
          @if (!isEnabled) {
            <span class="coded-micon">
              <svg class="pc-icon">
                <use attr.xlink:href="assets/fonts/custom-icon.svg{{ item().icon }}"></use>
              </svg>
            </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)="toggleMenu($event)"
        [routerLinkActive]="['active']"
      >
        
          @if (item().icon) {
            <span class="coded-micon">
              <svg class="pc-icon">
                <use attr.xlink:href="assets/fonts/custom-icon.svg{{ item().icon }}"></use>
              </svg>
            </span>
          }
        @if (item().icon) {
          <span class="coded-mtext">{{ item().title | translate }}</span>
        } @else {
          {{ item().title | translate }}
        }
      </a>
    </li>

Step 6: Modify Login Page UI

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

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

📌 This removes the role selection UI.