如何使用CanActivateFn隐藏无权限的Angular路由链接？

核心思路 #

CanActivateFn仅负责阻止无权限用户跳转路由，但不会自动隐藏页面上的路由链接。要彻底移除无权限链接，需在组件模板中直接判断用户权限，或把权限逻辑封装成可复用服务/指令，确保前端显示与路由守卫的权限规则一致。

具体实现步骤 #

1. 统一权限判断逻辑到AuthService #

先把守卫里的权限校验逻辑抽离到公共服务，让组件和守卫复用同一套规则：

// auth.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 根据实际业务实现权限判断，这里以角色校验为例
  hasPermission(requiredRole: string): boolean {
    const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
    return currentUser.roles?.includes(requiredRole) || false;
  }

  // 基础登录状态判断
  isLoggedIn(): boolean {
    return !!localStorage.getItem('currentUser');
  }
}

2. 调整路由守卫复用AuthService逻辑 #

修改auth.guard.ts，直接调用AuthService的方法，保持权限规则统一：

// auth.guard.ts
import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  // 从路由配置的data字段中读取所需权限
  const requiredRole = route.data['requiredRole'];
  
  if (authService.hasPermission(requiredRole)) {
    return true;
  }
  
  // 无权限时跳转至登录页或首页
  return router.createUrlTree(['/login']);
};

3. 在模板中通过权限判断控制链接显示 #

在页面组件的模板里，用*ngIf结合AuthService的方法隐藏无权限链接：

<!-- 导航栏示例模板 -->
<nav>
  <a routerLink="/home">首页</a>
  <!-- 仅具备admin权限的用户可见 -->
  <a routerLink="/admin" *ngIf="authService.hasPermission('admin')">后台管理</a>
  <!-- 仅登录用户可见 -->
  <a routerLink="/profile" *ngIf="authService.isLoggedIn()">个人中心</a>
</nav>

4. 在组件类中注入AuthService #

需在组件中公开AuthService，让模板能访问到权限判断方法：

// nav.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent {
  constructor(public authService: AuthService) {} // 用public暴露给模板
}

5. （可选）自定义指令简化模板代码 #

如果多个页面都需要权限控制，可封装自定义结构指令，让模板更简洁：

// has-permission.directive.ts
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { AuthService } from './auth.service';

@Directive({
  selector: '[appHasPermission]'
})
export class HasPermissionDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private authService: AuthService
  ) {}

  @Input() set appHasPermission(requiredRole: string) {
    if (this.authService.hasPermission(requiredRole)) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

使用指令后的模板：

<a routerLink="/admin" *appHasPermission="'admin'">后台管理</a>

关键注意事项 #

• 必须保证路由守卫和前端显示使用同一套权限逻辑，避免出现权限规则不一致的矛盾。
• 前端隐藏链接只是优化体验，CanActivateFn守卫是防止无权限用户直接通过URL跳转的核心防线，不可省略。

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