使用Amplify/Cognito能否限制Angular路由中特定路径参数:id的访问权限？

云原生阿岚

2026-10-6

Angular 路由分组访问限制实现方案

这个需求完全可以实现，借助Angular原生的CanActivate路由守卫就能完成，无需调整现有路由的基础结构。

具体实现步骤

1. 新建路由守卫类

你需要创建一个路由守卫来做访问权限校验，示例代码如下：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
// 替换为你实际的用户信息服务，用来获取当前登录用户的分组
import { UserService } from './services/user.service';

@Injectable({
  providedIn: 'root'
})
export class DashboardAccessGuard implements CanActivate {
  constructor(
    private userService: UserService,
    private router: Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot): boolean | UrlTree {
    // 取路由里的dashboard id参数
    const targetDashboardId = route.params['id'];
    // 取当前登录用户的所属分组id，根据你实际的存储逻辑调整，比如从localStorage或者用户服务取
    const currentUserGroupId = this.userService.getLoginUserGroupId();

    // 校验用户分组和目标dashboard是否匹配
    if (String(currentUserGroupId) === targetDashboardId) {
      return true;
    }

    // 不匹配直接跳转到404页面
    return this.router.parseUrl('/404');
  }
}

2. 调整路由配置，绑定守卫

修改你现有的路由配置，给dashboard/:id路由添加刚创建的守卫即可：

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', component: MainComponent,
  children: [
    { path: '', redirectTo: '/home', pathMatch: 'full'},
    // 新增canActivate配置绑定守卫
    { path: 'dashboard/:id', component: DashboardComponent, canActivate: [DashboardAccessGuard] },
    {path: '404', component: HomeComponent},
    {path: '**', redirectTo: '/404'}
  ]
}];