Angular AuthGuard页面拦截异常：布尔值正确但页面无法访问

你的代码存在几个关键问题，直接导致了页面无法正常跳转：

1. Promise从未被解析 #

你创建了Promise但全程没调用resolve()或reject()，Angular路由守卫会一直等待Promise完成，页面自然不会有任何跳转动作。

2. 跳转逻辑与返回值处理错误 #

• 守卫里不该直接调用router.navigateByUrl，正确做法是返回UrlTree让Angular自动处理跳转；
• subscribe回调里的return flagErrors完全无效，这个return根本传不到外层Promise里，等于没返回任何值。

3. 变量未初始化 #

flagErrors和flagLabels没有初始值，一旦匹配不到用户ID，它们会是undefined，后续的条件判断会出现逻辑错误。

修复后的代码 #

auth.guard.ts #

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> {
  return new Promise((resolve, reject) => {
    // 初始化变量，避免undefined引发的判断问题
    let flagErrors = false;
    let flagLabels = false;

    this.userService.getProfili().subscribe({
      next: (response) => {
        // 用find代替for循环，代码更简洁
        const userProfile = response.result.find(profile => profile.id === this.authService.id);
        if (userProfile) {
          flagErrors = userProfile.flagErrors;
          flagLabels = userProfile.flagLabels;
        }

        // 按权限返回对应UrlTree或布尔值
        if (flagErrors) {
          resolve(this.router.createUrlTree(['/errors']));
        } else if (flagLabels) {
          resolve(this.router.createUrlTree(['/label']));
        } else {
          // 无匹配权限时，返回false或跳转到默认页
          resolve(false);
          // 也可以改成跳首页：resolve(this.router.createUrlTree(['/']))
        }
      },
      error: (err) => {
        // 处理请求错误，避免守卫一直处于pending状态
        reject(err);
        // 或者直接跳登录页：resolve(this.router.createUrlTree(['/login']))
      }
    });
  });
}

额外优化提醒 #

当前路由配置存在循环跳转风险：比如用户访问/label，守卫检查后又要跳转到/label，会触发无限循环。建议调整逻辑：

• 首页用守卫根据权限自动跳转到对应页面；
• 目标页面的守卫只负责验证用户是否拥有对应权限，有则放行，无则跳转到无权限页面或首页。

修改后的路由配置示例：

// app-routing.ts
const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] }, // 首页通过守卫自动跳转
  { path: 'label', component: LabelsComponent, canActivate: [AuthGuard] }, // 此处守卫仅验证flagLabels权限
  { path: 'errors', component: ErrorsComponent, canActivate: [AuthGuard] }, // 此处守卫仅验证flagErrors权限
];

对应的守卫逻辑也要同步调整：比如用户访问/label时，检查是否有flagLabels权限，有则返回true放行，无则跳转到首页或提示页。

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