Angular 路由保护技术教程

简介

在Angular应用中，路由保护是一个重要的功能，它确保用户只能访问他们被授权访问的页面。本文将介绍如何使用Angular的CanActivate守卫来实现路由保护。

实现步骤

1. 创建守卫服务

首先，我们需要创建一个守卫服务。使用Angular CLI命令：

ng generate guard auth

这将生成一个名为auth.guard.ts的文件，并包含一个基本的守卫实现。

2. 实现守卫逻辑

在auth.guard.ts文件中，实现守卫逻辑。例如，我们可以检查用户是否登录：

    import { Injectable } from '@angular/core';
    import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
    import { Observable } from 'rxjs';

    @Injectable({
      providedIn: 'root'
    })
    export class AuthGuard implements CanActivate {
      constructor(private router: Router) {}

      canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable | Promise | boolean {
        // 假设我们有一个isLoggedIn变量来检查用户是否登录
        const isLoggedIn = this.checkLoginStatus();

        if (!isLoggedIn) {
          this.router.navigate(['/login']);
          return false;
        }
        return true;
      }

      checkLoginStatus(): boolean {
        // 这里你可以实现你的登录状态检查逻辑
        // 例如，检查localStorage或cookie中的token
        return localStorage.getItem('isLoggedIn') === 'true';
      }
    }
    

3. 配置路由

接下来，在路由配置中使用这个守卫。打开app-routing.module.ts文件，并更新路由配置：

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { HomeComponent } from './home/home.component';
    import { LoginComponent } from './login/login.component';
    import { AuthGuard } from './auth.guard';

    const routes: Routes = [
      { path: '', component: HomeComponent },
      { path: 'login', component: LoginComponent },
      { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }
    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }
    

4. 测试路由保护

现在，你可以运行你的Angular应用，并尝试访问受保护的路由（例如/protected）。如果未登录，你应该会被重定向到登录页面。

结论

通过本文，我们学习了如何在Angular中实现路由保护。使用CanActivate守卫，我们可以轻松地控制用户访问权限，确保应用的安全性。希望这个教程对你有所帮助！