Làm thế nào để bạn bảo vệ một Component được kích hoạt thông qua bộ định tuyến?

Để bảo vệ một thành phần được kích hoạt thông qua bộ định tuyến, bạn có thể sử dụng "Route Guards" trong Angular. Route Guards là các dịch vụ mà Angular sử dụng để kiểm soát việc truy cập vào một route hoặc rời khỏi route đó. Có nhiều loại Route Guards khác nhau, nhưng để bảo vệ một thành phần, bạn có thể sử dụng CanActivate để kiểm tra xem người dùng có được phép truy cập vào thành phần đó hay không trước khi route được kích hoạt.

Đây là một ví dụ về cách sử dụng CanActivate:

1. Đầu tiên, tạo một dịch vụ Guard:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const isAuthenticated = //... kiểm tra trạng thái xác thực của người dùng
    if (!isAuthenticated) {
      this.router.navigate(['/login']); // Chuyển hướng người dùng đến trang đăng nhập nếu chưa xác thực
      return false;
    }
    return true;
  }
}

2. Sau đó, áp dụng Guard này vào route cần bảo vệ trong module định tuyến của bạn:

const routes: R...