Angular通用CanDeactivate守卫未触发问题排查与解决

我尝试实现一个守卫，用于阻止已完成身份验证的用户导航至登录页面，希望将该守卫应用于应用中除登录页外的所有页面组件。

以下是我尝试的代码：

AuthGuard 代码

import { Injectable } from '@angular/core';
import { Router, ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree, CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticationService } from '../services/authentication.service';


@Injectable({ providedIn: 'root' })
export class AuthGuard<T> implements CanActivate, CanDeactivate<T> {

  constructor(private router: Router, private auth: AuthenticationService) {
  }

  canActivate(
    _route: ActivatedRouteSnapshot,
    _state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    return this.auth.isAuthenticated() || this.router.navigate(['/login']);
  }

  canDeactivate(
    _component: T,
    _currentRoute: ActivatedRouteSnapshot,
    _currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if (nextState && nextState.url.includes('/login')) {
      return !this.auth.isAuthenticated();
    }

    return true;
  }

}

路由配置代码

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

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard],
    canDeactivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: 'home',
  }
];


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

我也曾为登录组件单独实现过一个canActivate守卫，该方案可行，但我并不偏好这种方式。看过类似示例，但使用接口的方案并不合适，因为TypeScript不支持默认方法实现，我不想在每个组件中重复验证逻辑。

请问为什么我的CanDeactivate实现未被触发？正确的实现方式应该是什么？

附加信息：Angular v14.1.3

为什么CanDeactivate未触发？ #

• CanDeactivate守卫仅在离开当前配置了该守卫的路由组件时触发，你只给home路由配置了canDeactivate，所以只有从home页跳转时才会执行该逻辑，其他已认证页面跳转至登录页不会触发。
• 若用户直接在地址栏输入/login，或从未配置canDeactivate的路由跳转，该守卫完全不会执行，无法拦截这类场景。

正确实现方案 #

无需使用CanDeactivate，更合理的方式是给登录页路由添加反向CanActivate逻辑，复用同一个守卫类处理两种场景：拦截未认证用户访问受保护页面，同时阻止已认证用户进入登录页。

改进后的AuthGuard #

import { Injectable } from '@angular/core';
import { Router, ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticationService } from '../services/authentication.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private auth: AuthenticationService) {
  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    const isAuthenticated = this.auth.isAuthenticated();
    const isLoginRoute = state.url.includes('/login');

    // 访问登录页时，已认证用户直接跳转到首页
    if (isLoginRoute) {
      return isAuthenticated ? this.router.navigate(['/home']) : true;
    }

    // 访问其他页面时，未认证用户跳转到登录页
    return isAuthenticated || this.router.navigate(['/login']);
  }
}

更新路由配置 #

给登录页也添加canActivate守卫，覆盖所有路由场景：

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: 'home',
  }
];

方案优势 #

1. 覆盖全场景：无论用户是页面跳转还是直接输入地址，都会触发守卫逻辑，确保已认证用户无法访问登录页。
2. 无重复代码：同一个守卫类处理两种验证逻辑，无需为登录页单独创建守卫，也不用在组件中重复实现验证。
3. 符合设计意图：CanActivate的作用就是控制是否允许进入某路由，这正是拦截已认证用户进入登录页的正确场景；而CanDeactivate主要用于确认用户是否可离开当前组件（如未提交表单时阻止跳转），并不适合拦截目标路由访问。

内容的提问来源于stack exchange，提问作者Kevin Tubio