路由守卫（Guards）详解

在Angular应用中，路由守卫（Guards）是一种非常有用的功能，它允许你在用户导航到不同的路由之前或之后执行特定的逻辑。

1. 什么是路由守卫？

路由守卫是一种用于控制用户导航的Angular服务。它们可以被用来检查用户是否有权访问特定的路由、处理未保存的更改、重定向用户等。

2. 常见的路由守卫类型

• CanActivate：在进入路由前进行条件检查。
• CanDeactivate：从当前路由离开前进行条件检查。
• CanLoad：在动态加载模块前进行条件检查。
• Resolve：在路由被激活之前获取数据。

3. 创建一个简单的CanActivate守卫

让我们来创建一个简单的守卫，用于检查用户是否登录。

3.1 创建守卫服务

首先，通过Angular CLI创建一个新的守卫服务：

ng generate guard auth

这将生成一个新的Angular服务，并在其中实现CanActivate接口。

3.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(
            route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot
        ): boolean | UrlTree | Observable | Promise {
            // 此处假设有一个isAuthenticated方法用于检查用户是否已登录
            const isAuthenticated = false; // 示例：未登录

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

3.3 配置路由

最后，在路由配置文件中添加守卫：

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, canActivate: [AuthGuard] },
        { path: 'login', component: LoginComponent }
    ];

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

4. 结论

通过使用Angular的路由守卫，我们可以在用户导航到特定路由前或离开当前路由前执行各种检查。这种机制大大提高了应用的安全性和用户体验。

希望这篇教程能够帮助你更好地理解Angular的路由守卫，并在你的项目中灵活运用它们。