Angle9의 라우팅 가드 사용법에 대한 간략한 논의

이 글에서는 Angular 라우팅 가드의 사용법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Route Guard란 무엇입니까

모든 사용자는 언제 어디서나 탐색할 수 있습니다. 그러나 때로는 다양한 이유로 애플리케이션의 다른 부분에 대한 액세스를 제어해야 할 때도 있습니다. 가능한 시나리오는 다음과 같습니다.

사용자에게 대상 구성 요소로 이동할 수 있는 권한이 없을 수 있습니다.

아마도 사용자는 먼저 로그인(인증)을 해야 할 것입니다.

대상 구성요소를 표시하기 전에 일부 데이터를 가져와야 할 수도 있습니다.

구성 요소를 종료하기 전에 변경 사항을 저장하고 싶을 수도 있습니다.

사용자에게 다음과 같이 질문할 수 있습니다. 이 변경 사항을 저장하지 않고 취소하시겠습니까?

관련 추천: "angular Tutorial"

컴포넌트 생성

1. 홈 컴포넌트 생성
2. 로그인 컴포넌트 생성
3. 홈 아래 첫 번째 및 두 번째 하위 컴포넌트

라우팅 관련 핵심코드를 지켜주세요

라우팅의 모든 루트는 누구에게나 열려있습니다. 이러한 새로운 관리 기능은 로그인한 사용자만 액세스할 수 있어야 합니다.

관리 구성 요소에 액세스하려는 익명 사용자를 로그인 페이지로 리디렉션하는 CanActivate() 가드를 작성하세요.

1.1 auth 폴더 아래에 새로운 auth.service.ts 파일을 생성하여 로그인 요청 서비스를 시뮬레이션합니다. 실제 시나리오는 일반적으로 쿠키에 배경 토큰을 저장하는 것입니다.

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 아래에 새 파일을 생성합니다. 폴더 A 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 {}

사용 rrreee

최종 엔딩

인터셉터와 일반 라우팅 가드가 함께 사용되는데, 관심이 있으시면 자세히 알아보실 수 있습니다.

🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Angle9의 라우팅 가드 사용법에 대한 간략한 논의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!