ความแตกต่างระหว่าง CanLoad ของ Angular และ canActivate?

อะไรคือความแตกต่างระหว่างcanLoadและcanActivate?

export interface Route {
  path?: string;
  pathMatch?: string;
  matcher?: UrlMatcher;
  component?: Type<any>;
  redirectTo?: string;
  outlet?: string;
  canActivate?: any[];
  canActivateChild?: any[];
  canDeactivate?: any[];
  canLoad?: any[];
  data?: Data;
  resolve?: ResolveData;
  children?: Routes;
  loadChildren?: LoadChildren;
}

เมื่อใดที่ฉันควรเลือกอันใด

canActivateใช้เพื่อป้องกันไม่ให้ผู้ใช้ที่ไม่ได้รับอนุญาตเข้าถึงเส้นทางบางเส้นทาง ดูเอกสารสำหรับข้อมูลเพิ่มเติม

canLoadใช้เพื่อป้องกันไม่ให้แอปพลิเคชันโหลดโมดูลทั้งหมดอย่างเฉื่อยชาหากผู้ใช้ไม่ได้รับอนุญาตให้ทำเช่นนั้น

ดูเอกสารและตัวอย่างด้านล่างสำหรับข้อมูลเพิ่มเติม

{
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuard]
},

ด้วยรหัสนี้รหัสสำหรับ AdminModule trueจะถูกโหลดลงในใบสมัครเท่านั้นถ้าผลตอบแทน

หากผู้ใช้ไม่ได้รับอนุญาตให้เข้าถึงเส้นทางนี้และเราใช้เพียงcanActivateยามเท่านั้นระบบAdminModuleจะโหลดแม้ว่าผู้ใช้จะไม่สามารถเข้าถึงเส้นทางนั้นได้

• CanActivate - ตัดสินใจว่าจะเปิดใช้งานเส้นทางได้หรือไม่ยามนี้อาจไม่ใช่วิธีที่ดีที่สุดสำหรับโมดูลคุณลักษณะที่โหลดแบบขี้เกียจเนื่องจากยามนี้จะโหลดโมดูลในหน่วยความจำเสมอแม้ว่ายามจะส่งคืนเป็นเท็จซึ่งหมายความว่าผู้ใช้ไม่ได้รับอนุญาตให้เข้าถึง เส้นทาง.
• CanLoad - ตัดสินใจว่าจะโหลดโมดูลได้อย่างเฉื่อยชาหรือไม่ควบคุมว่าสามารถโหลดเส้นทางได้หรือไม่ สิ่งนี้จะมีประโยชน์สำหรับโมดูลฟีเจอร์ที่มีการโหลดแบบขี้เกียจ พวกเขาจะไม่โหลดด้วยซ้ำหากยามส่งคืนเท็จ

นี่คือการทดสอบที่ฉันทำกับยามทั้งสองด้วยโมดูลคุณลักษณะที่ขี้เกียจโหลด:

1. CanActivate Guard Test

คุณจะสังเกตเห็นที่ด้านล่างของหน้าเครือข่ายว่ามีคำขอ 24 รายการโดยมีขนาด 9.5 MB โอนเสร็จใน 3.34 วินาทีและโหลดเต็มที่ใน 3.47 วินาที

1. การทดสอบ CanLoad Guard

ที่นี่คุณจะเห็นความแตกต่างอย่างมากเมื่อเราใช้ CanLoad Guard เป็นเบราว์เซอร์ที่สร้างคำขอเพียง 18 รายการโดยมีขนาด 9.2 MB ที่ถ่ายโอนเสร็จสิ้นใน 2.64 วินาทีและโหลดเต็มที่ 2.59 วินาที

CanLoad Guard จะไม่โหลดข้อมูลโมดูลหากผู้ใช้ไม่ได้รับอนุญาตและนั่นทำให้คุณมีประสิทธิภาพมากขึ้นเนื่องจากเวลาในการโหลดลดลงเกือบ 1 วินาทีและนั่นเป็นเวลาที่มากในการโหลดหน้าเว็บไม่ต้องสงสัยเลยว่าขึ้นอยู่กับขนาดโมดูล

เคล็ดลับ: หากคุณต้องการทำการทดสอบในโครงการของคุณตรวจสอบให้แน่ใจว่าได้Disable Cacheเลือกช่องทำเครื่องหมายในแท็บเครือข่ายแล้วจะมีการทำเครื่องหมายในภาพแรก

เกี่ยวกับคำถามจากความคิดเห็นในโพสต์อื่น ๆ "ถ้าฉันใช้ canActivate ในสถานการณ์ข้างต้นจะแตกต่างกันอย่างไร"

จริงๆแล้วสำหรับผู้ใช้จะไม่มีความแตกต่างเขาจะไม่สามารถเข้าถึงเพจได้ในทั้งสองกรณี แม้ว่าจะมีความแตกต่างหนึ่งที่ซ่อนอยู่ หากคุณกด F12 และย้ายไปที่ Sources (ใน Chrome) ซึ่งจะดาวน์โหลดไฟล์ จากนั้นคุณจะเห็นว่าในกรณีที่ดาวน์โหลดไฟล์canActiveพร้อมรหัสแล้ว ( chunk.js ) แม้ว่าคุณจะไม่มีสิทธิ์เข้าถึงเพจก็ตาม

แต่ในกรณีที่canLoadจะไม่มีไฟล์chunk.jsพร้อมซอร์สโค้ด

ดังที่คุณเห็นสิ่งนี้มีผลกระทบอย่างมากต่อความปลอดภัย

และแน่นอนอย่าลืมว่าcanLoadสามารถใช้ได้กับLazyLoaded Modulesเท่านั้น

canActivateใช้เพื่อป้องกันผู้ใช้ที่ไม่ได้รับอนุญาต

canLoadใช้เพื่อป้องกันโมดูลทั้งหมดของแอพ

ตัวอย่างcanActivate :

{ path: 'product',canActivate:[RouteGaurd], component : ProductComponent }

ตัวอย่างcanLoad :

{ path: 'user' , canLoad: [AuthenticGuard], loadChildren : './user/user.module#UserModule' }

CanLoadยามป้องกันไม่ให้โหลดของโมดูลโหลดขี้เกียจ โดยทั่วไปเราใช้ตัวป้องกันนี้เมื่อเราไม่ต้องการให้ผู้ใช้ที่ไม่ได้รับอนุญาตนำทางไปยังเส้นทางใด ๆ ของโมดูลและหยุดจากนั้นดูซอร์สโค้ดของโมดูล

Angular มีcanActivate Guard ซึ่งป้องกันไม่ให้ผู้ใช้ที่ไม่ได้รับอนุญาตเข้าถึงเส้นทาง แต่ไม่ได้หยุดการดาวน์โหลดโมดูล ผู้ใช้สามารถใช้คอนโซลนักพัฒนาของ Chrome เพื่อดูซอร์สโค้ด CanLoad Guard ป้องกันไม่ให้ดาวน์โหลดโมดูล

อันที่จริงCanLoadป้องกันโมดูลที่จะโหลด แต่เมื่อโหลดโมดูลแล้วCanLoad guard จะไม่ทำอะไรเลย สมมติว่าเราได้ป้องกันการโหลดโมดูลโดยใช้CanLoad guard สำหรับผู้ใช้ที่ไม่ได้รับการพิสูจน์ตัวตน เมื่อผู้ใช้ล็อกอินแล้วโมดูลนั้นจะสามารถโหลดได้และเราจะสามารถนำทางพา ธ เด็กที่กำหนดค่าโดยโมดูลนั้นได้ แต่เมื่อผู้ใช้ออกจากระบบผู้ใช้ยังคงสามารถนำทางพา ธ เด็ก ๆ เหล่านั้นได้เนื่องจากโมดูลโหลดแล้ว ในกรณีนี้หากเราต้องการปกป้องเส้นทางเด็กจากผู้ใช้ที่ไม่ได้รับอนุญาตเราจำเป็นต้องใช้CanActivate guard ด้วย

ใช้CanLoadก่อนโหลด AdminModule:

  {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
        canLoad: [ AuthGuardService ]
      },

หลังจากโหลด AdminModule แล้วในโมดูล AdminRouting เราสามารถใช้CanActiveเพื่อปกป้องเด็กจากผู้ใช้ที่ไม่ได้รับอนุญาตเช่นร้อง:

{ 
      path: '',
      component: AdminComponent,
      children: [ 
        {
          path: 'person-list',
          component: PersonListComponent,
          canActivate: [ AuthGuardService ]
        }
      ]
    }  

canActivateหากผู้ใช้ที่ไม่ได้รับอนุญาตเข้าสู่ยังคงโหลดโมดูลนั้น คุณต้องcanLoadเพื่อให้เกิดการตัดสินว่าจำเป็นต้องโหลดหรือไม่

สิ่งสำคัญที่ต้องสังเกตว่าcanLoadจะไม่หยุดไม่ให้ใครบางคนรับซอร์สโค้ดของคุณ เบราว์เซอร์จะไม่ดาวน์โหลด. js เว้นแต่ว่าผู้ใช้จะได้รับอนุญาต แต่คุณสามารถบังคับให้ดาวน์โหลดด้วยตนเองได้โดยการสั่งนำเข้า ('./ xxxxx.js') บนคอนโซลเบราว์เซอร์

ชื่อโมดูลสามารถพบได้อย่างง่ายดายใน main.js ของคุณในนิยามเส้นทางของคุณ