> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/able-pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/able-pro/angular/how-to/remove-role-base-authentication.md).

# Remove Role Base Authentication

## **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:**

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

**After:**

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

{% hint style="warning" %}
This ensures that all users are treated as `Admin`, bypassing role-based restrictions.
{% endhint %}

***

## 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:

```json
import { Role } from 'src/app/@theme/types/role';
```

**Step 2: Remove Role-Based Data Restrictions**

Find and remove:

```json
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:

```typescript
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:**

<pre class="language-typescript"><code class="lang-typescript"><strong>  readonly item = input&#x3C;NavigationItem>();
</strong>
  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 &#x26;&#x26; this.item()!.role!.length > 0) {
      if (currentUserRole) {
        const parentRole = this.parentRole();
        const allowedFromParent =
          this.item()!.isMainParent || (parentRole &#x26;&#x26; parentRole.length > 0 &#x26;&#x26; parentRole.includes(currentUserRole));
        if (allowedFromParent) {
          this.isEnabled = this.item()!.role!.includes(currentUserRole);
        }
      }
    } else if (parentRoleValue &#x26;&#x26; parentRoleValue.length > 0) {
      // If item.role is empty, check parentRole
      if (currentUserRole) {
        this.isEnabled = parentRoleValue.includes(currentUserRole);
      }
    }
  }
</code></pre>

**After:**

```typescript
readonly item = input<NavigationItem>
```

**Step 5: Remove Role-Based UI Restrictions**

**Modify `menu-collapse.component.html`**

Remove the following attributes:

```html
[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**:

```typescript
[parentRole]="item().role"
```

**Modify `menu-item.component.html`**

**Before:**

```typescript
<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:**

```typescript
<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**:

```typescript
@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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://phoenixcoded.gitbook.io/able-pro/angular/how-to/remove-role-base-authentication.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
