ส่งผ่านพารามิเตอร์ไปยังตัวป้องกันเส้นทาง

ฉันกำลังทำงานกับแอพที่มีบทบาทมากมายที่ฉันต้องใช้ยามเพื่อบล็อกการนำทางไปยังส่วนต่างๆของแอพตามบทบาทเหล่านั้น ฉันรู้ว่าฉันสามารถสร้างคลาสการ์ดป้องกันสำหรับแต่ละบทบาทได้ แต่จะมีคลาสเดียวที่ฉันสามารถส่งผ่านพารามิเตอร์ไปได้ กล่าวอีกนัยหนึ่งฉันต้องการที่จะทำสิ่งที่คล้ายกันนี้:

{ 
  path: 'super-user-stuff', 
  component: SuperUserStuffComponent,
  canActivate: [RoleGuard.forRole('superUser')]
}

แต่เนื่องจากทั้งหมดที่คุณผ่านคือชื่อประเภทของยามของคุณจึงไม่สามารถคิดวิธีที่จะทำเช่นนั้นได้ ฉันควรจะบิตกระสุนและเขียนคลาสยามแต่ละตัวต่อบทบาทและทำลายภาพลวงตาของความสง่างามด้วยการมีประเภทพารามิเตอร์เดี่ยวแทนหรือไม่

แทนที่จะใช้forRole()คุณสามารถทำได้:

{ 
   path: 'super-user-stuff', 
   component: SuperUserStuffComponent,
   canActivate: RoleGuard,
   data: {roles: ['SuperAdmin', ...]}
}

และใช้สิ่งนี้ใน RoleGuard ของคุณ

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
    : Observable<boolean> | Promise<boolean> | boolean  {

    let roles = route.data.roles as Array<string>;
    ...
}

นี่คือสิ่งที่ฉันทำและวิธีแก้ปัญหาที่เป็นไปได้สำหรับปัญหาผู้ให้บริการที่หายไป

ในกรณีของฉันเรามียามที่รับการอนุญาตหรือรายการการอนุญาตเป็นพารามิเตอร์ แต่สิ่งเดียวกันก็มีบทบาท

เรามีคลาสสำหรับจัดการกับเจ้าหน้าที่รักษาความปลอดภัยโดยมีหรือไม่ได้รับอนุญาต:

@Injectable()
export class AuthGuardService implements CanActivate {

    checkUserLoggedIn() { ... }

สิ่งนี้เกี่ยวข้องกับการตรวจสอบเซสชันที่ใช้งานของผู้ใช้ ฯลฯ

นอกจากนี้ยังมีวิธีการที่ใช้เพื่อรับตัวป้องกันสิทธิ์แบบกำหนดเองซึ่งขึ้นอยู่กับAuthGuardServiceตัวมันเอง

static forPermissions(permissions: string | string[]) {
    @Injectable()
    class AuthGuardServiceWithPermissions {
      constructor(private authGuardService: AuthGuardService) { } // uses the parent class instance actually, but could in theory take any other deps

      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        // checks typical activation (auth) + custom permissions
        return this.authGuardService.canActivate(route, state) && this.checkPermissions();
      }

      checkPermissions() {
        const user = ... // get the current user
        // checks the given permissions with the current user 
        return user.hasPermissions(permissions);
      }
    }

    AuthGuardService.guards.push(AuthGuardServiceWithPermissions);
    return AuthGuardServiceWithPermissions;
  }

สิ่งนี้ช่วยให้เราใช้วิธีการลงทะเบียนยามที่กำหนดเองตามพารามิเตอร์สิทธิ์ในโมดูลเส้นทางของเรา:

....
{ path: 'something', 
  component: SomeComponent, 
  canActivate: [ AuthGuardService.forPermissions('permission1', 'permission2') ] },

ส่วนที่น่าสนใจforPermissionคือAuthGuardService.guards.push- โดยพื้นฐานแล้วจะทำให้แน่ใจว่าเมื่อใดก็ตามที่forPermissionsถูกเรียกเพื่อรับคลาสยามที่กำหนดเองมันจะเก็บไว้ในอาร์เรย์นี้ด้วย สิ่งนี้เป็นแบบคงที่ในคลาสหลัก:

public static guards = [ ]; 

จากนั้นเราสามารถใช้อาร์เรย์นี้เพื่อลงทะเบียนยามทั้งหมดได้ - นี่เป็นสิ่งที่ใช้ได้ตราบเท่าที่เราตรวจสอบให้แน่ใจว่าเมื่อถึงเวลาที่โมดูลแอปลงทะเบียนผู้ให้บริการเหล่านี้เส้นทางได้รับการกำหนดและสร้างคลาสยามทั้งหมดแล้ว (เช่นตรวจสอบใบสั่งนำเข้าและ ทำให้ผู้ให้บริการเหล่านี้ต่ำที่สุดในรายการ - การมีโมดูลการกำหนดเส้นทางจะช่วยได้):

providers: [
    // ...
    AuthGuardService,
    ...AuthGuardService.guards,
]

หวังว่านี่จะช่วยได้

โซลูชันของ @ AluanHaddad ให้ข้อผิดพลาด "ไม่มีผู้ให้บริการ" นี่คือการแก้ไขสำหรับสิ่งนั้น (รู้สึกสกปรก แต่ฉันขาดทักษะในการทำให้ดีขึ้น)

ตามแนวคิดฉันลงทะเบียนในฐานะผู้ให้บริการแต่ละคลาสที่สร้างแบบไดนามิกที่สร้างขึ้นโดยroleGuard.

ดังนั้นสำหรับทุกบทบาทที่ตรวจสอบ:

canActivate: [roleGuard('foo')]

คุณควรจะมี:

providers: [roleGuard('foo')]

อย่างไรก็ตามโซลูชันของ @ AluanHaddad ตามที่เป็นอยู่จะสร้างคลาสใหม่สำหรับการเรียกแต่ละครั้งroleGuardแม้ว่าrolesพารามิเตอร์จะเหมือนกันก็ตาม การใช้งานlodash.memoizeมีลักษณะดังนี้:

export var roleGuard = _.memoize(function forRole(...roles: string[]): Type<CanActivate> {
    return class AuthGuard implements CanActivate {
        canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
            Observable<boolean>
            | Promise<boolean>
            | boolean {
            console.log(`checking access for ${roles.join(', ')}.`);
            return true;
        }
    }
});

หมายเหตุการรวมกันของแต่ละบทบาทจะสร้างคลาสใหม่ดังนั้นคุณต้องลงทะเบียนเป็นผู้ให้บริการทุกบทบาทรวมกัน กล่าวคือถ้าคุณมี:

canActivate: [roleGuard('foo')]และcanActivate: [roleGuard('foo', 'bar')]คุณจะต้องลงทะเบียนทั้งสองอย่าง:providers[roleGuard('foo'), roleGuard('foo', 'bar')]

ทางออกที่ดีกว่าคือการลงทะเบียนผู้ให้บริการโดยอัตโนมัติในคอลเลกชันผู้ให้บริการระดับโลกภายในroleGuardแต่อย่างที่ฉันพูดไปฉันขาดทักษะในการนำไปใช้