Angular 5/6：无需重定向到错误路由的路由守卫权限控制

你的需求完全合理——路由就该反映当前应用状态，没必要为权限错误单独开个无意义的路由。我刚好有个完美符合你要求的方案，基于CanActivate守卫实现，不用重定向、不用在组件内做检查，还支持未来的懒加载需求。

核心思路：父路由+子路由的组合 #

我们可以把/protected/foo设为父路由，它本身不渲染任何组件，而是通过守卫的结果，动态引导到对应的子路由：有权限时加载目标组件，无权限时加载403错误组件。这样URL始终保持为/protected/foo，完全符合你对路由状态的要求。

1. 修改路由配置 #

const routes: Routes = [
  {
    path: 'protected/foo',
    canActivate: [YourAuthGuard], // 你的权限守卫
    children: [
      { path: '', component: FooViewComponent }, // 有权限时默认显示的组件
      { path: 'forbidden', component: ErrorForbiddenViewComponent } // 无权限时显示的组件
    ]
  }
];

注意父路由不要指定component属性，让子路由的组件完全占据路由出口。

2. 更新守卫逻辑 #

在你的CanActivate守卫中，判断权限后返回对应的UrlTree——不是跳转到新的独立路由，而是跳转到当前父路由下的子路由：

@Injectable({ providedIn: 'root' })
export class YourAuthGuard implements CanActivate {
  constructor(
    private router: Router,
    private authService: YourAuthService // 你的权限服务
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> {
    return this.authService.checkUserPermission().pipe(
      map(hasPermission => {
        if (hasPermission) {
          return true; // 允许导航到默认子路由（FooViewComponent）
        } else {
          // 跳转到当前父路由下的forbidden子路由，URL保持不变
          return this.router.createUrlTree(['forbidden'], { relativeTo: route });
        }
      })
    );
  }
}

为什么这个方案适合你？ #

• 路由状态清晰：URL始终是/protected/foo，准确反映用户试图访问的资源，没有无意义的错误路由干扰；
• 无需额外状态传递：不用通过路由参数或全局状态存储错误信息，守卫直接处理逻辑；
• 组件懒加载友好：未来把FooViewComponent改成懒加载子路由只需修改子路由配置，守卫逻辑完全不用动：

  { path: '', loadComponent: () => import('./foo-view/foo-view.component').then(m => m.FooViewComponent) }
  

• 符合守卫设计初衷：权限检查完全在守卫层完成，FooViewComponent不需要关心权限逻辑，也不会被无权限的用户加载。

替代方案：用skipLocationChange静默导航 #

如果你不想用子路由，也可以通过skipLocationChange选项实现“静默”导航——加载错误组件但不修改URL：

// 守卫中的无权限分支
this.router.navigate(['/error/forbidden'], { skipLocationChange: true });
return false;

不过这个方案需要你在路由配置中定义/error/forbidden路由，虽然用户看不到这个URL，但路由配置里会存在这个“无意义”的路由，所以我更推荐前面的子路由方案。

内容的提问来源于stack exchange，提问作者Ivan Hušnjak