如何正确为子路由使用CanActivate？Angular 5权限守卫失效排查

我来帮你梳理几个关键的排查点和修复方案，从你贴出的代码里能看到几个明显的问题，咱们一步步来解决：

1. AuthGuard里错误调用了属性而非方法 #

你的authguard.guard.ts中，canActivate方法返回的是this.user.isUserAuthenticated()，但在auth.service.ts里，isUserAuthenticated是一个布尔类型的属性，并不是方法。你应该调用服务里定义好的getUserLoggedIn()方法来获取认证状态：

修改authguard.guard.ts的canActivate方法：

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // 调用正确的方法，而非直接把属性当函数调用
    return this.user.getUserLoggedIn();
}

这里如果之前直接调用属性作为函数，浏览器控制台其实应该会抛出类似isUserAuthenticated is not a function的错误，你可以检查下控制台有没有遗漏的报错（有时候错误会被折叠或者在其他标签页里）。

2. 确认AuthGuard是否在模块中注册 #

Angular 5里，守卫类必须在AppModule（或相关功能模块）的providers数组中注册，否则Angular无法实例化它，自然不会执行守卫逻辑。

打开你的app.module.ts，确保AuthguardGuard和AuthService都被加入到providers里：

import { AuthguardGuard } from './authguard.guard';
import { AuthService } from './_service/auth.service';

@NgModule({
  ...
  providers: [
    AuthguardGuard,
    AuthService,
    ...
  ],
  ...
})
export class AppModule { }

你可以先做个简单测试：如果Guard构造函数里的console.log('In AuthGuard!')没有在控制台输出，说明Guard根本没被实例化，大概率就是没注册providers的问题。

3. 修复DashboardModule的路由配置 #

你的dashboard.module.ts里定义了dashboardRoutes，但没有将其注册为子路由模块，而且还有个无效的重定向规则：

修改dashboard.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 记得导入你的组件：UserComponent、EditComponent等

const dashboardRoutes: Routes = [
    // 原规则是重定向到自身，会导致无限循环，改成空路径重定向到user
    { path: '', redirectTo: 'user', pathMatch: 'full' },
    { path: 'user', component: UserComponent,
        children: [
            { path: '', component: EditComponent },
            { path: 'userMail', component: UserMailComponent },
            { path: 'userSettings', component: UserSettingsComponent}
        ]
    },
];

@NgModule({
  imports: [
    RouterModule.forChild(dashboardRoutes) // 注册子路由模块
  ],
  declarations: [
    // 声明你的组件：UserComponent、EditComponent等
  ]
})
export class DashboardModule { }

4. 验证AuthService的状态更新逻辑 #

确保你在用户登录成功后调用了authService.setUserLoggedIn()方法，比如在登录组件里：

import { AuthService } from './_service/auth.service';
import { Router } from '@angular/router';

@Component({...})
export class LoginComponent {
  constructor(private authService: AuthService, private router: Router) {}

  login() {
    // 假设这里完成了登录验证逻辑
    this.authService.setUserLoggedIn();
    // 跳转到dashboard
    this.router.navigate(['/dashboard']);
  }
}

如果没调用这个方法，isUserAuthenticated会一直是false，不过这会导致守卫拒绝访问，而不是允许直接进入，所以这可能不是当前守卫失效的直接原因，但也是需要确认的点。

最后测试步骤 #

1. 清空浏览器缓存，重启Angular开发服务器（ng serve --open）
2. 打开浏览器控制台，留意是否有报错信息
3. 尝试访问/dashboard，查看Guard的构造函数日志是否输出，以及canActivate是否正确返回预期的布尔值

内容的提问来源于stack exchange，提问作者k.vincent