Angular中无需组件使用路由守卫？解决重定向时守卫失效问题

嘿，这个问题我之前也碰到过！你遇到的核心问题是：当路由配置了redirectTo时，Angular会直接触发跳转逻辑，不会执行当前路由的canActivate守卫——因为这类跳转路由没有需要激活的组件，而canActivate守卫的触发时机是和组件激活流程绑定的，所以你的守卫代码根本没机会运行。

下面给你两种靠谱的解决方案，推荐第一种，更简洁优雅：

方案1：修改守卫，在守卫内部实现重定向（优先选择） #

Angular的路由守卫支持返回UrlTree对象来直接指定重定向目标，这样你完全不需要给路由关联任何组件，也不用依赖redirectTo配置。

具体操作步骤：

1. 先在你的GetTokenKeyGuard中注入Router服务，然后修改canActivate方法：

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

@Injectable({
  providedIn: 'root'
})
export class GetTokenKeyGuard implements CanActivate {
  // 注入Router用于生成重定向的UrlTree
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean | UrlTree {
    // 先执行你的token存储逻辑
    localStorage.setItem('token_key', route.params.tokenKey);
    
    // 这里根据你的业务逻辑判断要重定向到A还是B组件的路由
    // 举个例子：假设A是根路径''，B是登录页'auth/login'，你可以替换成自己的判断条件
    const shouldRedirectToA = true; // 这里改成你的实际判断逻辑
    if (shouldRedirectToA) {
      return this.router.parseUrl('');
    } else {
      return this.router.parseUrl('auth/login');
    }
  }
}

2. 然后修改路由配置，去掉redirectTo和component，只保留路径和守卫：

const routes: Routes = [ 
  { path: '', component: IndexComponent }, 
  { path: 'auth/login', component: LoginComponent }, 
  // 无需组件和redirectTo，守卫会直接处理重定向
  { path: 'auth/login/:tokenKey', canActivate: [GetTokenKeyGuard] }, 
];

这样当用户访问auth/login/:tokenKey时，守卫会先完成token存储，然后直接重定向到你指定的目标路由，全程不需要任何组件参与。

方案2：创建空组件作为占位符 #

如果你不想修改守卫的逻辑，也可以创建一个完全空的组件作为路由的占位符，让守卫能正常触发。

1. 先创建一个空组件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-empty-placeholder',
  template: '' // 空模板，不会渲染任何内容
})
export class EmptyPlaceholderComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // 组件初始化时直接跳转到目标路由，也可以依赖路由的redirectTo
    this.router.navigate(['']);
  }
}

2. 然后修改路由配置，用这个空组件作为该路由的组件：

const routes: Routes = [ 
  { path: '', component: IndexComponent }, 
  { path: 'auth/login', component: LoginComponent }, 
  // 用空组件作为占位，守卫会正常执行
  { path: 'auth/login/:tokenKey', canActivate: [GetTokenKeyGuard], component: EmptyPlaceholderComponent },
];

这种方案下，因为路由有对应的组件需要激活，canActivate守卫会正常执行，之后空组件会立即触发重定向，用户不会看到任何多余内容。

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