canActivate屬性

????????在Angular中，canActivate?是路由守衛（Route Guards）的一種，用于控制用戶對特定路由的訪問權限。路由守衛是Angular路由系統中的一個功能，它們可以在路由激活之前執行自定義邏輯，以決定是否允許路由激活。

????????canActivate守衛可以應用于組件路由或任何路由上。它是一個返回布爾值的函數，如果返回 true，則路由可以激活；如果返回 false，則路由激活會被阻止，用戶將無法訪問該路由。

canActivate?守衛的基本用法：

????????在這個例子中，如果用戶嘗試訪問protected路由，AuthGuard守衛將被調用。如果用戶未登錄，守衛將返回false并重定向用戶到登錄頁面。

????????路由守衛是Angular中一個非常強大的功能，它不僅可以用于簡單的權限控制，還可以用于更復雜的場景，比如角色基礎的訪問控制、頁面刷新時的認證狀態檢查等。

• 創建守衛：首先，你需要創建一個守衛。在Angular中，這通常是通過使用ng generate guard命令來完成的。

ng generate guard auth

• 實現守衛邏輯：在生成的守衛類中，你需要實現canActivate方法。這個方法應該返回一個布爾值或一個Observable，如果Observable發出true，則路由可以激活。

import { Injectable } from '@angular/core';import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } 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> | Promise<boolean> | boolean {// 檢查用戶是否登錄if (this.isLoggedIn()) {return true;} else {// 如果用戶未登錄，則重定向到登錄頁面this.router.navigate(['/login']);return false;}}isLoggedIn(): boolean {// 這里應該是檢查用戶登錄狀態的邏輯return false;}}

• 應用守衛：將守衛應用于路由。在路由模塊中，你可以使用canActivate屬性來指定守衛。

? ?const routes: Routes = [{path: 'protected',component: ProtectedComponent,canActivate: [AuthGuard]}];

Resolve屬性

????????在Angular中，resolve是路由系統中的一個特性，用于在路由激活之前獲取數據。resolve可以確保在組件加載之前，所需的數據已經被加載和準備就緒，從而避免組件在沒有數據的情況下渲染。

resolve通常用于以下場景：

• 預加載組件所需的數據。
• 確保路由激活之前數據已經準備好。
• 避免組件內部進行重復的數據獲取。

resolve的基本用法：?

1. 定義 Resolver： 創建一個 resolver 類，這個類實現了 Resolve 接口，并在 resolve 方法中定義獲取數據的邏輯。

   import { Injectable } from '@angular/core';
   import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
   import { Observable } from 'rxjs';
   import { DataService } from './data.service'; // 假設有一個數據服務@Injectable({providedIn: 'root'
   })
   export class DataResolver implements Resolve<any> {constructor(private dataService: DataService) {}resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {return this.dataService.getData(); // 從服務中獲取數據}
   }

2. 在路由配置中使用 Resolver： 在路由模塊中，你可以在路由定義中使用 resolve 屬性來指定 resolver。

   import { Routes } from '@angular/router';
   import { DataResolver } from './data-resolver';const routes: Routes = [{path: 'data-required',component: DataRequiredComponent,resolve: {data: DataResolver // 使用 resolver 的類名}}
   ];

3. 在組件中使用注入的數據： 在目標組件中，你可以通過依賴注入的方式獲取到 resolve 所提供的數據。

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';@Component({selector: 'app-data-required',template: `...` // 組件模板
   })
   export class DataRequiredComponent implements OnInit {public data: any;constructor(private route: ActivatedRoute) {}ngOnInit() {this.data = this.route.snapshot.data['data']; // 獲取 resolve 提供的數據}
   }

????????注意事項

• resolve可以返回一個?observable，promise或者任何同步值。
• 如果resolve返回的是observable，Angular 會等待它完成（即發出數據）才會繼續路由激活流程。
• 如果resolve拋出錯誤，路由激活會失敗，并且可以設置一個錯誤處理路由來處理這種情況。

其它屬性：

????????在Angular路由系統中，除了canActivate和resolve這兩個屬性外，還有一些主要的路由屬性如下所示：

1. path: 定義路由的URL路徑。這是路由定義中最基本的屬性。
2. component: 指定當路由匹配時應該創建和顯示的組件。
3. redirectTo: 用于重定向到另一個路由。如果定義了這個屬性，當路由匹配時，Angular會導航到指定的路徑。
4. outlet: 指定路由應該渲染在哪個命名的路由出口。默認情況下，路由渲染在名為primary的出口。
5. children: 用于定義子路由。子路由可以進一步細化路由配置，允許嵌套路由結構。
6. loadChildren: 用于懶加載路由模塊。這個屬性允許你指定一個模塊的路徑，Angular會在需要時才加載這個模塊。
7. canLoad: 類似于canActivate，但是它是用于守衛路由模塊的加載。如果返回false，則模塊不會被加載。
8. canDeactivate: 用于確定用戶是否可以離開當前組件。通常用于表單數據未保存時的確認。
9. data: 用于傳遞額外的數據給路由或組件。這些數據可以通過ActivatedRoute服務訪問。
10. runGuardsAndResolvers: 用于控制路由激活時守衛和解析器的執行。它可以設置為always（總是執行），paramsChange（僅當路由參數變化時執行），或pathParamsChange（僅當路由路徑參數變化時執行）。
11. routeConfig: 用于定義應用的路由配置。在舊版本的Angular中使用，但在新版本中已被RouterModule.forRoot和RouterModule.forChild替代。
12. useAsDefault: 用于設置一個路由作為默認路由，當URL沒有匹配任何路由時，Angular會自動導航到這個路由。
13. pathMatch: 用于控制路由匹配的行為。它可以設置為full（完全匹配）或prefix（前綴匹配）。
14. migrate: 用于在遷移舊的路由配置時提供向后兼容性。