Angular 有角度的Firebase防护，具有特定角色的阻止路由

大家好

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

我的角度保护返回并使用配置文件对象：{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}
      })
    );

   }
  }

---

一种方法是使用的

数据

属性。可以将自定义值附加到任何给定管线。在您的示例中，您可以创建一个名为

roles

的属性，该属性可用于

canActivate（）

。在以下示例中，TasksComponent的路由中添加了角色数组。在guard中，我们可以从

next.data.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
    })
  );

  }
}

---

希望这有帮助

data.roles的属性意味着什么？根据您的示例，您希望导航继续还是被阻止？另外，您是否有用于决定警卫的路线的数据？谢谢您的回复。在该属性中，分配给用户的两个角色是{admin:true，current:false}，我希望导航被阻止，这取决于您的示例中该卫士的propsOkay中的角色，哪个角色需要存在且为true才能继续导航？是否所有使用此防护的路线都使用相同的逻辑？每个路由是否有多个守卫检查不同的特定角色？例如，如果admin为true，则对于此路由{path:'admin，component:AdminComponent，canActivate:[RoleGuard]}，我应该以admin身份访问该路由。其思想是，警卫检查多个角色。谢谢，亚历山大，这是个问题。如果您对需要不同角色的不同路由使用相同的防护，那么如何匹配这些防护。您是否提前知道路由配置中每个路由所需的确切角色，这些角色是静态的？这个管理路由如何始终使用相同的角色，或者从某些数据源来看是动态的？

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
    })
  );

  }
}

{
  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
    })
  );

  }
}