Angular AuthGuard路由无限循环问题及跳转逻辑修复咨询

问题根源 #

1. canActivateChild方法逻辑混乱：存在未初始化变量（redirect、pageRedired）、错误的跳转逻辑，每次激活子路由时重复触发导航，形成无限循环。
2. 路由配置存在多个空path的路由组，导致路由匹配优先级混乱。
3. 登录跳转路径与实际路由配置不匹配（代码中跳转到login，但路由定义的是sign-in）。

修复步骤 #

1. 修正AuthGuard核心逻辑

删除原有混乱的跳转逻辑，统一通过_check方法处理认证状态，使用UrlTree避免重复触发守卫：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
import { Observable, of, switchMap } from 'rxjs';
import { AuthService } from 'app/core/auth/auth.service';

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

    constructor(
        private _authService: AuthService,
        private _router: Router
    ) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
        const redirectUrl = state.url === '/sign-out' ? '/' : state.url;
        return this._check(redirectUrl);
    }

    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
        // 复用canActivate逻辑，避免重复代码
        return this.canActivate(childRoute, state);
    }

    canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> {
        return this._check('/');
    }

    private _check(redirectURL: string): Observable<boolean | UrlTree> {
        return this._authService.check()
            .pipe(
                switchMap((authenticated) => {
                    if (!authenticated) {
                        // 跳转到实际登录路由，返回UrlTree避免循环
                        return of(this._router.createUrlTree(['/sign-in'], { queryParams: { redirectURL } }));
                    }

                    // 根据用户page字段匹配目标页面
                    const pageUser = this._authService.page;
                    let targetPage: string | null = null;

                    switch(pageUser) {
                        case '1':
                            targetPage = '/page-1';
                            break;
                        case '2':
                            targetPage = '/page-2';
                            break;
                        case '3':
                            targetPage = '/page-3';
                            break;
                        default:
                            targetPage = null;
                    }

                    // 仅当当前URL不是目标页面时跳转
                    if (targetPage && redirectURL !== targetPage) {
                        return of(this._router.createUrlTree([targetPage]));
                    }

                    return of(true);
                })
            );
    }
}

2. 优化路由配置结构

合并同类型路由组，避免空path路由的匹配冲突：

import { Route } from '@angular/router';
import { AuthGuard } from 'app/core/auth/guards/auth.guard';
import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard';
import { LayoutComponent } from 'app/layout/layout.component';
import { InitialDataResolver } from 'app/app.resolvers';

export const appRoutes: Route[] = [
    // 默认跳转登录页
    { path: '', pathMatch: 'full', redirectTo: 'sign-in' },

    // 无需认证的路由（登录、注册、公开页面）
    {
        path: '',
        children: [
            { path: 'sign-in', loadChildren: () => import('app/modules/auth/sign-in/sign-in.module').then(m => m.SignInModule) },
            { path: 'sign-up', loadChildren: () => import('app/modules/auth/sign-up/sign-up.module').then(m => m.SignUpModule) }, // 修复拼写错误：ignUpModule → SignUpModule
            { path: 'page-3', loadChildren: () => import('app/modules/page-3/payment-plan.module').then(m => m.Page3Module) },
        ]
    },

    // 需要认证的路由组
    {
        path: '',
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            { path: 'user', loadChildren: () => import('app/modules/user/user.module').then(m => m.UserModule) },
            { path: 'page-1', loadChildren: () => import('app/modules/page-1/page1.module').then(m => m.Page1Module) },
            { path: 'page-2', loadChildren: () => import('app/modules/page-2/page2.module').then(m => m.Page2Module) },
            { path: 'page-4', loadChildren: () => import('app/modules/page-4/page4.module').then(m => m.Page4Module) },
        ]
    },

    // 404兜底路由（可选）
    { path: '**', redirectTo: 'sign-in' }
];

3. 修复模块路由拼写错误

修正page-1.module.ts中的路由引用错误：

@NgModule({
    declarations: [
        Page1Component // 确保组件已声明
    ],
    imports: [
        RouterModule.forChild(page1Routes),
    ]
})
export class Page1Module { }

关键修复说明 #

• 避免无限循环：使用router.createUrlTree返回导航指令，替代直接调用navigate，Angular会自动处理导航且不会重复触发守卫。
• 统一逻辑：canActivateChild复用canActivate的认证逻辑，减少代码冗余和错误。
• 路由结构优化：合并同权限级别的路由组，避免空path路由的匹配冲突。
• 变量初始化：修复原有代码中未定义变量的问题，用switch语句简化页面匹配逻辑。

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