Authentication and Authorization

1. User submits login form (email + password)
2. Angular sends POST /api/login to backend
3. Backend validates credentials, returns { token: "eyJ..." }
4. Angular stores the JWT in localStorage
5. All subsequent API requests include the token in the Authorization header
6. Backend validates the token on protected endpoints
7. On logout, Angular removes the token from localStorage

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, tap } from 'rxjs';
import { Router } from '@angular/router';

export interface LoginResponse {
  token: string;
  user: { id: number; name: string; role: string };
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private apiUrl = 'https://api.example.com/auth';
  private isLoggedIn$ = new BehaviorSubject<boolean>(this.hasToken());

  constructor(private http: HttpClient, private router: Router) {}

  private hasToken(): boolean {
    return !!localStorage.getItem(&#039;auth_token&#039;);
  }

  login(email: string, password: string): Observable<LoginResponse> {
    return this.http.post<LoginResponse>(`${this.apiUrl}/login`, { email, password })
      .pipe(
        tap(response => {
          localStorage.setItem(&#039;auth_token&#039;, response.token);
          localStorage.setItem(&#039;user&#039;, JSON.stringify(response.user));
          this.isLoggedIn$.next(true);
        })
      );
  }

  logout(): void {
    localStorage.removeItem(&#039;auth_token&#039;);
    localStorage.removeItem(&#039;user&#039;);
    this.isLoggedIn$.next(false);
    this.router.navigate([&#039;/login&#039;]);
  }

  getToken(): string | null {
    return localStorage.getItem(&#039;auth_token&#039;);
  }

  getCurrentUser(): any {
    const user = localStorage.getItem(&#039;user&#039;);
    return user ? JSON.parse(user) : null;
  }

  isAuthenticated(): Observable<boolean> {
    return this.isLoggedIn$.asObservable();
  }

  hasRole(role: string): boolean {
    const user = this.getCurrentUser();
    return user?.role === role;
  }
}

@Component({ selector: 'app-login', templateUrl: './login.component.html' })
export class LoginComponent {
  email = '';
  password = '';
  error = '';
  loading = false;

  constructor(private authService: AuthService, private router: Router) {}

  onLogin(): void {
    this.loading = true;
    this.authService.login(this.email, this.password).subscribe({
      next: () => this.router.navigate(['/dashboard']),
      error: () => {
        this.error = 'Invalid email or password.';
        this.loading = false;
      }
    });
  }
}

<form (ngSubmit)="onLogin()">
  <input [(ngModel)]="email" name="email" type="email" placeholder="Email" />
  <input [(ngModel)]="password" name="password" type="password" placeholder="Password" />
  <div *ngIf="error" class="error">{{ error }}</div>
  <button type="submit" [disabled]="loading">
    {{ loading ? &#039;Logging in...' : 'Login' }}
  </button>
</form>

<!-- Show admin panel only if user is an admin -->
<div *ngIf="authService.hasRole(&#039;admin')">
  <a routerLink="/admin">Admin Panel</a>
</div>

<!-- Show user-specific content -->
<ng-container *ngIf="authService.getCurrentUser() as user">
  <p>Welcome, {{ user.name }}!</p>
</ng-container>

<!-- Logout button -->
<button (click)="authService.logout()">Logout</button>