angular9 でのルーティングガードの使用法に関する簡単な説明-jsチュートリアル-php.cn

この記事では、Angularルーティングガードの使用方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

angular9 でのルーティングガードの使用法に関する簡単な説明

ルートガードとは

ユーザーはいつでもどこにでも移動できます。ただし、さまざまな理由から、アプリケーションのさまざまな部分へのアクセスを制御する必要がある場合があります。考えられるシナリオは次のとおりです。

ユーザーには、ターゲットコンポーネントに移動する権限がない可能性があります。

おそらく、ユーザーは最初にログイン (認証) する必要があります。

ターゲットコンポーネントを表示する前に、いくつかのデータを取得する必要がある場合があります。

コンポーネントを終了する前に、変更を保存することをお勧めします。

ユーザーに「この変更を保存せずに破棄しますか?」と尋ねることもできます。

関連する推奨事項: 「angular チュートリアル」

コンポーネントの作成

1. ホームコンポーネント作成
2. ログインコンポーネントの作成
3. ホームの下の最初と 2 番目のサブコンポーネント

angular9 でのルーティングガードの使用法に関する簡単な説明

ガードルーティング関連のコアコード

ルーティングのすべてのルートは誰でも利用できます。これらの新しい管理機能は、ログインしたユーザーのみがアクセスできるようにする必要があります。

管理コンポーネントにアクセスしようとしている匿名ユーザーをログインページにリダイレクトするための CanActivate() ガードを作成します。

1.1 auth フォルダーに、ログイン要求サービスをシミュレートする新しいauth.service.tsファイルを作成します。実際のシナリオでは、通常、バックグラウンドトークンを Cookie に保存します。

import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { tap, delay } from 'rxjs/operators'; @Injectable({ providedIn: 'root', }) export class AuthService { isLoggedIn = false; //默认未登录 // 记录登录之后,需要跳转到原来请求的地址 redirectUrl: string; // 登录 login(): Observable { return of(true).pipe( delay(1000), tap(val => this.isLoggedIn = true) ); } // 登出 logout(): void { this.isLoggedIn = false; } }

ログイン後にコピー

1.2 auth フォルダーに新しいauth.guard.tsファイルを作成します

import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable({ providedIn: 'root', }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { let url: string = state.url return this.checkLogin(url); } checkLogin(url: string): boolean { if (this.authService.isLoggedIn) { return true; } // 保存原始的请求地址,登录后跳转到该地址 this.authService.redirectUrl = url; // 未登录,跳转到登录页面 this.router.navigate(['/login']); return false; } }

ログイン後にコピー

ルーティングでガードを使用します

app-routing.module.ts ファイルの下の

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AuthGuard } from './auth/auth.guard'; import { LoginComponent } from './login/login.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'home', loadChildren: () => import('./home/home.module') .then(mod => mod.HomeModule), canActivate: [AuthGuard], // 守卫路由 } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}

ログイン後にコピー

# を使用します。

一般的なルーティングガードとインターセプターを一緒に使用します。ご興味がございましたら、さらに詳しくご覧ください。

プログラミング関連の知識については、

プログラミングビデオをご覧ください。！

以上がangular9 でのルーティングガードの使用法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。