ルーティングでアクセス制限を行う[Angular]

ルーティングでアクセス制限を行う[Angular18]

URLのルートによって、アクセス制限をしていきます。
バージョンはAngular18です。

実装例

アクセス制限を行うファイルを作成

アクセス制限を行うファイルを作成するコマンドがあるのでそれで作成します。
以下のコマンドを実行すると、いくつか選択肢があるのですが、今回はCanActivateを選択します。

ng generate guard auth 

作成すると以下のような内容になります。
この、CanActivateFnの中に、アクセス制御の内容を記述し、trueの場合、アクセス許可し、falseの場合は、アクセス拒否します。単純なboolean値でなく、Observable<boolean>なども使えます。

export const authGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  return true;
};

アクセス制限をルートに対して設定する

app.routes.tsファイルで、アクセス制限をかけるルートに対して、先ほど作成したauthGuard関数をcanActivateに設定することで、アクセス制限を設定できます。

export const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'top', component: TopComponent, canActivate: [authGuard]}
];

設定は以上です。上記の設定を行えば、canActivateFnでfalseを返す場合、topにアクセスできないようになるといった、アクセス制限を行うことが可能です。