Angular路由守卫陷入循环问题求助

问题根源 #

你给父路由/admin和登录页面的子路由都加了LogedInGuard，这直接导致了循环：当用户已登录时，访问/admin会触发父路由的守卫，守卫返回false并导航到/admin/dashboard，但导航到/admin/dashboard必须先通过父路由/admin的守卫，此时用户仍处于登录状态，守卫再次返回false并重复导航，无限循环由此产生。

修复方案 #

1. 调整路由配置

移除父路由/admin上的canActivate: [LogedInGuard]，只在登录页面的子路由保留该守卫——父路由需要允许已登录用户进入dashboard，不需要阻止他们访问。

修改后的路由代码：

{ 
    path: 'admin', 
    component: AdminComponent,
    // 移除父路由的LogedInGuard
    children: [
      { path: '', 
        component: AdminLoginComponent, 
        pathMatch: 'full',
        canActivate: [LogedInGuard],
      },
      { 
        path: 'dashboard', 
        canActivate: [AuthGuard],
        component: AdminDashboardComponent,
        children: [
          { path: '', component: AdminNewsListComponent},
          { path: 'add-news/:id', component: AdminAddNewsComponent},
          { path: 'add-news', component: AdminAddNewsComponent},
        ]
      }
    ]
  },

2. 优化守卫逻辑（可选但推荐）

Angular中，守卫返回UrlTree比返回false后手动导航更规范，能避免一些潜在的导航问题。修改LogedInGuard的canActivate方法：

@Injectable()
export class LogedInGuard implements CanActivate {

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

  canActivate(): boolean | UrlTree {
    if(this.auth.isAuthenticated()){
      console.log("logedin guard return false");
      // 返回UrlTree代替手动导航+返回false
      return this.router.createUrlTree(['/admin/dashboard']);
    }
    console.log("logedin guard return true");
    return true;
  }
}

调整后，已登录用户访问/admin时，会触发子路由的LogedInGuard，直接跳转到/admin/dashboard，父路由不再拦截，循环问题即可解决。

内容的提问来源于stack exchange，提问作者Dario Lucić