如何通过自定义指令获取routerLink值以实现权限校验

你提到的ng-reflect-router-link属性是Angular开发模式下注入的调试属性，生产构建时会被默认移除，完全不适合作为业务逻辑的读取来源。我们可以通过Angular依赖注入直接获取元素上绑定的RouterLink实例拿到目标路由，不需要读取DOM属性。

实现步骤 #

1. 编写自定义指令核心逻辑 #

通过注入当前元素上挂载的RouterLink实例，直接获取解析后的路由配置，不需要读取DOM属性：

import { Directive, ElementRef, OnInit, Optional } from '@angular/core';
import { RouterLink } from '@angular/router';
// 替换为你项目中实际的权限管理服务
import { PermissionService } from '../services/permission.service';

@Directive({
  selector: '[appCheckPermission]',
  standalone: true // 非独立组件模式删除该行，将指令添加到对应模块的declarations数组中
})
export class CheckPermissionDirective implements OnInit {

  constructor(
    @Optional() private routerLink: RouterLink,
    private el: ElementRef<HTMLElement>,
    private permissionService: PermissionService
  ) {}

  ngOnInit(): void {
    // 兼容没有绑定routerLink的场景，可根据业务调整逻辑
    if (!this.routerLink) return;

    // 从RouterLink实例直接拿到绑定的路由配置数组，比如['/users/edit', userId]
    const targetRoute = this.routerLink.commands;
    // 调用权限校验方法
    const hasAccess = this.permissionService.verifyRoutePermission(targetRoute);

    // 无权限处理逻辑，根据业务需求选择：
    if (!hasAccess) {
      // 方案1：隐藏元素
      this.el.nativeElement.style.display = 'none';
      // 方案2：禁用按钮
      // this.el.nativeElement.setAttribute('disabled', 'true');
      // 方案3：直接移除DOM
      // this.el.nativeElement.remove();
    }
  }
}

2. 权限校验逻辑示例 #

在你的权限服务中实现路由校验逻辑，可根据业务规则自定义：

// permission.service.ts 示例代码
verifyRoutePermission(routeCommands: any[]): boolean {
  // 提取路由路径字符串，过滤掉动态参数部分
  const routePath = routeCommands
    .filter(item => typeof item === 'string')
    .join('/');
  // allowedRoutes为当前用户已授权的路由列表，从登录状态/本地缓存/状态管理器中获取
  const allowedRoutes = this.userAuthInfo.allowedRouteList || [];
  return allowedRoutes.includes(routePath);
}

3. 页面使用方式 #

和你给出的示例完全兼容，不需要额外修改绑定规则：

<button [routerLink]="['/users/edit', userId]" appCheckPermission >编辑用户</button>

注意事项 #

• 如果需要校验路由参数、queryParams等信息，也可以直接从RouterLink实例的对应属性读取，不需要操作DOM
• 动态修改routerLink值的场景，可以增加ngOnChanges生命周期监听路由变化重新校验权限

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