Angular Firebase Guards，阻止具有特定角色的路由

Question

嗨Angular开发人员，

我需要你的帮助，我需要阻止具有特定角色的路由，这是我的配置文件文档：

我的 angular 守卫 return 和对象的配置文件：{admin: true, current: false}

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class RoleGuard implements CanActivate {

  constructor(
    public authService: AuthService,
    public router: Router
  ) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<any> | boolean {

    return this.authService.getAuthWithProfile().pipe(
      map((data) => {
        const roles = data.roles;
        return roles; // This returns   {admin: true, current: false}
      })
    );

   }
  }

问题是Angular路由中的角色如何实现守卫，例如：

{ path: 'tasks', component: TasksComponent, canActivate: [RoleGuard] },

Answer 1

一种方法是使用 data 属性 of Route。您可以将自定义值附加到任何给定的路由。在您的示例中，您可以创建一个名为 roles 的属性，它可以在您的 canActivate() 中使用。在以下示例中，角色数组被添加到 TasksComponent 的路由中。在守卫中，我们可以从 next.data.roles 中提取 roles，然后检查从 Firebase 返回的角色是否存在且处于活动状态：

路线：

{
  path: 'tasks',
  component: TasksComponent,
  data: {
    roles: ['admin', 'subscriber']
  }
  canActivate: [RoleGuard]
}

后卫：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | boolean {
  const routeRoles = next.data && next.data.roles; // ['admin', 'subscriber']

  return this.authService.getAuthWithProfile().pipe(
    map((data) => {
      const roles = data.roles; // { admin: true, current: false }
      const activeRoles = Object.entries(roles).filter(([role, isActive]) => isActive).map(([role, isActive]) => role); // ['admin']

      return routeRoles.some(routeRole => activeRoles.includes(routeRole)); // true
    })
  );

  }
}

路线上的 [=25=]data.roles 不必是数组，它可以是对象，您可以以任何您喜欢的方式检查激活路线的存在。例如，如果只有一个角色：

{
  path: 'tasks',
  component: TasksComponent,
  data: {
    role: 'admin'
  }
  canActivate: [RoleGuard]
}

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | boolean {
  const routeRole = next.data && next.data.role; // 'admin'

  return this.authService.getAuthWithProfile().pipe(
    map((data) => {
      const roles = data.roles; // { admin: true, current: false }
      const activeRoles = Object.entries(roles).filter(([role, isActive]) => isActive).map(([role, isActive]) => role); // ['admin']

      return routeRoles.includes(routeRole); // true
    })
  );

  }
}

希望对您有所帮助！

Angular Firebase Guards，阻止具有特定角色的路由

Angular Firebase Guards, block routing with specific roles

angular-routing

angularfire

angular

angular-guards