Ionic/Angular 16和Auth Guard（应用CanActivateFn）

1 年 ago

逸, 科

2 minutes

我最近验证了使用Angular来控制认证相关界面的功能。以前我使用@angular/router模块的CanActivate来进行控制，但最新版本的Angular中已不推荐使用，而是推荐使用CanActivateFn。

已经实施

Webストレージに情報を格納/消去

源代码

我們把本次動作驗證所使用的源代碼公開在這裡，希望能對您提供一些參考。

主要模块 (zhǔ mó

その他エンドポイントexpress.jsなど

Auth Guard 和 CanActivateFn

由于许多前辈已在其他页面中介绍了Auth Guard的概念，因此在此帖子中我们将省略这部分内容。
在实现auth guard时，我们希望将重点放在从CanActivate（Ver15）变更为CanActivateFn（Ver16）的变化上。

在之前的版本中

在之前的Ionic/Angular版本中，添加页面时有一个选项叫做guards，它可以方便地自动生成代码。自动生成的代码会应用CanActivate并展开基本的代码结构。

使用ionic generate添加的示例：

$ ionic g
? What would you like to generate?       
  module
  class
  directive
> guard
  pipe
  interface
  enum
(Move up and down to reveal more choices
? Name/path of guard: protected
> ng.cmd generate guard auth --project=app
? Which type of guard would you like to create? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) CanActivate
 ( ) CanActivateChild
 ( ) CanDeactivate
 ( ) CanLoad
 ( ) CanMatch
CREATE src/app/protected.guard.spec.ts (331 bytes)
CREATE src/app/protected.guard.ts (457 bytes)     
[OK] Generated guard!

在指定的路径下生成了”protected.guard.ts”。
自动生成的示例：

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

@Injectable({
  providedIn: 'root'
})
export class ProtectedGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    // ここで判定結果を返却する実装が一般的です。
    // 外部サービス呼び出しや内部のチェックロジックを実装するなど。
    return true;
  }
}

这次的

如前所述，如果要使用最新版本的Angular 16，請更改使用CanActivateFn而不是CanActivate。

受保护的.guard.ts

我們將根據以上指示進行實施更改，新加入一個名為protectedGuard的CanActivateFn。

export const protectedGuard: CanActivateFn = (_route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  const guard = inject(ProtectedGuard);
  return guard.canActivate(state);
};

export class ProtectedGuard {
  canActivate(state: RouterStateSnapshot): Observable<boolean> {
    // 認証状態を判定するロジックを入れる
    return true;
  }
}

app-routing.module.ts 路由模块

此外，您可以使用与旧版本相同的实现方式来配置路由器。带有 canActivate: [ProtectedGuard] 的部分与之前版本的描述相同。

path: 'dashboard',
loadChildren: () => import('./pages/dashboard/dashboard.module').then( m => m.DashboardPageModule),
canActivate: [ProtectedGuard]

下次是

在推进FireFly验证的过程中，我们将来可能需要前端认证相关的应用程序，因此尝试在认证部分的机制中进行实施。
下次，我希望能够推进有关使用FireFly为基础制造应用程序所需的技术要素的验证。