Angular 权限管理的两种解决方案

Angular 权限管理的两种解决方案

在做后台管理系统的时候，权限管理应该是必备的功能点了。这一节我们介绍两种方案来确定用户权限。

首先，我们面板是这个样子，先让大家有一个基础印象：

准备工作

1. 首先我们通过 cli工具新建了一个 heroes模块，所有工作我们都将在这个模块中完成；
2. 其次新建了 heroes-add、 heroes-list、 heroes-login、 heroes-modify四个页面模块，来分别实现不同的功能；
3. 最后通过子路由的方式配置了项目的路由信息，以便让项目跑起来。
4. 封装一些常用的方法为服务，以便多处使用：
5. 添加请求拦截器，为已登录用户每次的请求头添加 token。（拦截器请参照7.2节介绍）

使用路由守卫控制权限

目前我们项目的状态是：无论用户是否登录，或者登录用户的权限如何，都能直接进行新增、修改、删除等操作。显然，这不是我们想要的。

所以，我们可以通过路由守卫来控制权限。

我们先给角色分配一下权限：

• superadmin: 拥有所有权限；
• admin: 只有修改权限，没有删除、新增权限；
• user: 只有查看权限，没有操作权限。

给路由配置添加角色(roles数组)：

const routes: Routes = [
  {
   
    path: 'heroes',
    component: HeroesComponent,
    children: [
      {
    path: 'list', component: HeroesListComponent},
      {
   
        path: 'login',
        loadChildren: () => import('./heroes-login/heroes-login.module').then(m => m.HeroesLoginModule),
        canActivate: [LoginAuthGuard]
      },
      {
   
        path: 'add',
        loadChildren: () => import('./heroes-add/heroes-add.module').then(m => m.HeroesAddModule),
        canActivate: [AuthGuard],
        data: {
   roles: ['superadmin']}
      },
      {
   
        path: 'modify/:id',
        loadChildren: () => import('./heroes-modify/heroes-modify.module').then(m => m.HeroesModifyModule),
        canActivate: [AuthGuard],
        data: {
   roles: ['superadmin', 'admin']}
      },
      {
    path: '', redirectTo: 'list', pathMatch: 'full' }
    ]
  }
];

新建一个 auth守卫

ng g g demos/heroes/guards/auth

// auth.guard.ts
// ...
export class AuthGuard