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

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

ルート ガードとは

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

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

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

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

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

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

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

コンポーネントの作成

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

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

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

管理コンポーネントにアクセスしようとしている匿名ユーザーをログイン ページにリダイレクトするための 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<boolean> {
    return of(true).pipe(
      delay(1000),
      tap(val => this.isLoggedIn = true)
    );
  }
// 登出
  logout(): void {
    this.isLoggedIn = false;
  }
}</boolean>

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 サイトの他の関連記事を参照してください。