angular9中路由守衛的使用方法

小編給大家分享一下angular9中路由守衛的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

路由守衛是什么

任何用戶都能在任何時候導航到任何地方。但有時候出于種種原因需要控制對該應用的不同部分的訪問。可能包括如下場景：

該用戶可能無權導航到目標組件。

可能用戶得先登錄（認證）。

在顯示目標組件前，你可能得先獲取某些數據。

在離開組件前，你可能要先保存修改。

你可能要詢問用戶：你是否要放棄本次更改，而不用保存它們？

相關推薦：《angular教程》

組件的創建

1、home組件創建
2、login組件創建
3、home下的first和second子組件

守衛路由相關核心代碼

routing中每個路由都是對所有人開放的。這些新的管理特性應該只能被已登錄用戶訪問。

編寫一個 CanActivate() 守衛，將正在嘗試訪問管理組件匿名用戶重定向到登錄頁。

1.1 在auth 文件夾下,新建一個auth.service.ts文件,模擬有關登錄的請求服務,實際場景一般是將后臺token保存在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;
  }
}

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中路由守衛的使用方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！