Angular权限守卫导航至/unauthorised路由时如何保持原URL不变？

当用户无权限访问页面时，要保持浏览器地址栏显示原URL，同时渲染无权限页面内容，可以通过以下两种方案实现：

方案一：使用skipLocationChange导航 #

通过Router.navigate的skipLocationChange参数，实现导航至无权限页面但不修改地址栏，同时返回false阻止原路由激活。

修改后的守卫代码：

@Injectable()
export class PermissionGuard implements CanActivate {
  constructor(private readonly permissionService: PermissionService, private readonly router: Router) {}

  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    const hasPermission = await this.permissionService.userHasPermissionForRoute(state.url);

    if (!hasPermission) {
      // skipLocationChange: true 确保地址栏保持原URL
      await this.router.navigate(['/unauthorised'], { skipLocationChange: true });
      return false;
    }

    return hasPermission;
  }
}

方案二：动态替换当前路由组件 #

直接修改当前路由的配置，将组件替换为无权限组件，再触发路由刷新，无需跳转新路由即可渲染目标内容。

修改后的守卫代码：

import { UnauthorisedComponent } from './path-to-unauthorised.component';

@Injectable()
export class PermissionGuard implements CanActivate {
  constructor(
    private readonly permissionService: PermissionService,
    private readonly router: Router
  ) {}

  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    const hasPermission = await this.permissionService.userHasPermissionForRoute(state.url);

    if (!hasPermission) {
      // 匹配当前路由配置
      const targetRoute = this.router.config.find(r => r.path === state.url.slice(1));
      if (targetRoute) {
        // 替换路由组件为无权限组件
        targetRoute.component = UnauthorisedComponent;
        // 刷新当前路由，应用组件替换
        await this.router.navigate([state.url]);
      }
      return true;
    }

    return hasPermission;
  }
}

关键说明 #

• 方案一中，skipLocationChange: true会阻止新URL加入浏览器历史栈，用户点击返回会回到之前的页面，符合常规权限拦截的预期。
• 方案二中，动态修改路由配置需要注意路由匹配的准确性，若原路由包含参数或嵌套结构，需调整路由匹配逻辑。

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