How to implement role-based auth in Angular

ng generate service services/auth

import { Injectable } from '@angular/core'
import { BehaviorSubject, Observable } from 'rxjs'
import { map } from 'rxjs/operators'

export interface User {
  id: string
  username: string
  email: string
  roles: string[]
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private currentUserSubject: BehaviorSubject<User | null>
  public currentUser: Observable<User | null>

  constructor() {
    const storedUser = localStorage.getItem('currentUser')
    this.currentUserSubject = new BehaviorSubject<User | null>(
      storedUser ? JSON.parse(storedUser) : null
    )
    this.currentUser = this.currentUserSubject.asObservable()
  }

  public get currentUserValue(): User | null {
    return this.currentUserSubject.value
  }

  login(username: string, password: string): Observable<User> {
    // Replace with actual HTTP call
    return new Observable(observer => {
      const user: User = {
        id: '1',
        username,
        email: `${username}@example.com`,
        roles: ['admin', 'user']
      }
      localStorage.setItem('currentUser', JSON.stringify(user))
      this.currentUserSubject.next(user)
      observer.next(user)
      observer.complete()
    })
  }

  logout(): void {
    localStorage.removeItem('currentUser')
    this.currentUserSubject.next(null)
  }

  hasRole(role: string): boolean {
    const user = this.currentUserValue
    return user ? user.roles.includes(role) : false
  }

  hasAnyRole(roles: string[]): boolean {
    const user = this.currentUserValue
    return user ? roles.some(role => user.roles.includes(role)) : false
  }

  hasAllRoles(roles: string[]): boolean {
    const user = this.currentUserValue
    return user ? roles.every(role => user.roles.includes(role)) : false
  }
}

ng generate guard guards/role

import { Injectable } from '@angular/core'
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'
import { AuthService } from '../services/auth.service'

@Injectable({
  providedIn: 'root'
})
export class RoleGuard implements CanActivate {
  constructor(
    private router: Router,
    private authService: AuthService
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const currentUser = this.authService.currentUserValue

    if (currentUser) {
      const requiredRoles = route.data['roles'] as string[]

      if (requiredRoles && requiredRoles.length > 0) {
        if (this.authService.hasAnyRole(requiredRoles)) {
          return true
        }

        this.router.navigate(['/unauthorized'])
        return false
      }

      return true
    }

    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } })
    return false
  }
}

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { RoleGuard } from './guards/role.guard'

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [RoleGuard],
    data: { roles: ['admin'] }
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [RoleGuard],
    data: { roles: ['admin', 'user'] }
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [RoleGuard],
    data: { roles: ['user'] }
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'unauthorized',
    component: UnauthorizedComponent
  }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

ng generate directive directives/has-role

import { Directive, Input, TemplateRef, ViewContainerRef, OnInit } from '@angular/core'
import { AuthService } from '../services/auth.service'

@Directive({
  selector: '[appHasRole]'
})
export class HasRoleDirective implements OnInit {
  private roles: string[] = []

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private authService: AuthService
  ) {}

  @Input()
  set appHasRole(roles: string | string[]) {
    this.roles = Array.isArray(roles) ? roles : [roles]
    this.updateView()
  }

  ngOnInit(): void {
    this.authService.currentUser.subscribe(() => {
      this.updateView()
    })
  }

  private updateView(): void {
    this.viewContainer.clear()

    if (this.authService.hasAnyRole(this.roles)) {
      this.viewContainer.createEmbeddedView(this.templateRef)
    }
  }
}

<!-- Show for admins only -->
<button *appHasRole="'admin'" (click)="deleteUser()">
  Delete User
</button>

<!-- Show for admin or moderator -->
<div *appHasRole="['admin', 'moderator']">
  <h3>Moderation Panel</h3>
</div>

<!-- Show for all authenticated users -->
<nav *appHasRole="['admin', 'user', 'guest']">
  <a routerLink="/dashboard">Dashboard</a>
</nav>