Angular 2 CanActivate 被调用两次

typescript

# Angular 2 中 CanActivate 被调用两次的解决方法

在使用 Angular 2 中的路由守卫时，有时候会遇到一个问题，即 CanActivate 被调用两次的情况。这可能导致意外的行为和性能问题。在本文中，我们将讨论这个问题的原因，并提供一种解决方法。

## 问题描述

当我们在 Angular 2 中使用 CanActivate 守卫时，期望的行为是只有在导航到某个路由时才会触发守卫。然而，一些开发者在实际使用中发现 CanActivate 有时会被调用两次，这与预期不符。

## 问题根本原因

这个问题的根本原因通常与路由配置和模块的加载顺序有关。当路由模块被惰性加载时，Angular 在加载模块时会创建两个独立的注入器，这可能导致 CanActivate 守卫被调用两次。

## 解决方法

为了解决这个问题，我们可以使用 CanActivate 守卫的另一种形式，即 CanActivateChild。这个守卫与 CanActivate 类似，但它会在每次导航到子路由时触发，而不是只在导航到父路由时触发。

让我们通过一个简单的案例代码来说明这个解决方法。

typescript
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild } from '@angular/router';
import { Observable } from 'rxJS';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Your authentication logic here
    console.log('CanActivate called');
    return true;
  }
  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Your authentication logic here
    console.log('CanActivateChild called');
    return true;
  }
}

在这个例子中，我们同时实现了 CanActivate 和 CanActivateChild。在你的路由模块中，将 CanActivate 替换为 CanActivateChild：

typescript
const routes: Routes = [
  {
    path: 'protected',
    canActivateChild: [AuthGuard],
    children: [
      // Your protected routes here
    ]
  },
  // Other routes
];

##

通过使用 CanActivateChild 守卫，我们可以避免 CanActivate 被调用两次的问题。这是一个简单而有效的解决方法，确保我们的路由守卫在预期的时候触发，同时避免不必要的性能开销。

希望这个解决方法能够帮助你在使用 Angular 2 中的路由守卫时更好地处理 CanActivate 被调用两次的情况。