Angular's canLoad और CanActivate के बीच अंतर?

Question

बीच क्या अंतर है 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;
}

मुझे कब उनमें से एक होना चाहिए?

Answer 1

अनधिकृत उपयोगकर्ताओं को कुछ मार्गों तक पहुँचने से रोकने के लिए canActivate का उपयोग किया जाता है। अधिक जानकारी के लिए डॉक्स देखें ।

अगर उपयोगकर्ता को ऐसा करने के लिए अधिकृत नहीं किया जाता है तो एप्लिकेशन को पूरे मॉड्यूल को लोड करने से रोकने के लिए canLoad का उपयोग किया जाता है।

अधिक जानकारी के लिए डॉक्स और उदाहरण देखें।

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

इस कोड के साथ, AdminModule के कोड को केवल तभी आवेदन में लोड किया जाएगा जब AuthGuard वापस आ जाएगा true।

यदि उपयोगकर्ता इस मार्ग का उपयोग करने के लिए अधिकृत नहीं है, और हम केवल एक canActivateगार्ड का उपयोग AdminModuleकरेंगे , तो इसे लोड किया जाएगा, भले ही उपयोगकर्ता उस मार्ग तक पहुंचने में सक्षम न हो।

Comments

यदि मैं canActivateउपरोक्त परिदृश्य में उपयोग करता हूं , तो क्या अंतर होगा?

— k11k2

canActiveमॉड्यूल के साथ @ k11k2 लोड किया जाएगा (F12> स्रोत - क्रोम में)। आप .js फ़ाइलों को देख सकते हैं। canLoadइन मॉड्यूल्स (फ़ाइलें .js) को लोड नहीं किया जाएगा :) ऊपर मेरे उत्तर की जाँच करें जहाँ मैंने इसे बेहतर बताया है

— DiPix

उस परिदृश्य के बारे में क्या है जहाँ व्यवस्थापक लॉग-इन करता है, इसलिए व्यवस्थापक मॉड्यूल canLoadरिटर्न के माध्यम से सही हो जाता है और फिर एप्लिकेशन से लॉग आउट हो जाता है। अब, एक गैर-व्यवस्थापक उपयोगकर्ता उसी ब्राउज़र में लॉग इन करता है, यह कैसे काम करता है? क्या लोड किया गया मॉड्यूल कैश से बेदखल या हटा दिया गया है?

— कीर्तिवासन

@Keththivasan आलसी AdminModule के पहले से लोड किए गए चंक को हटाने के लिए कुछ भी नहीं करता है, जब कोई उपयोगकर्ता लॉग आउट करता है और साइन-इन फिर से एक अलग खाते के साथ करता है जिसके पास AdminModule लोड होने की पर्याप्त अनुमति नहीं होती है। हालाँकि, आप किसी भी तरह लोडेड कैश्ड मॉड्यूल को छोड़कर किसी भी तरह पहुँच प्राप्त नहीं करेंगे। मुझे नहीं लगता कि यह एक वास्तविक सुरक्षा मुद्दा है है के बाद से आमतौर पर एक डिवाइस एक वास्तविक उपयोगकर्ता के

— hastrb

@ sgClaudia98 आप दोनों का उपयोग कर सकते हैं, लेकिन गार्ड के निष्पादन का सख्त आदेश है। यही कारण है कि यह आपके मामले में कोई फर्क नहीं पड़ता कि मैंने पहले क्या कहा था। मुझे लगता है कि मैंने अपनी पहली टिप्पणी में बहुत विस्तृत विवरण दिया है। यह बहुत अजीब मामला होगा अगर आजकल एक के बाद एक डिवाइस और एडमिन लॉग-इन नहीं करते हैं।

— hastrb

Answer 2

• CanActivate - तय करता है कि क्या कोई मार्ग सक्रिय किया जा सकता है, यह गार्ड फीचर मॉड्यूल के लिए सबसे अच्छा तरीका नहीं हो सकता है जो आलसी लोड किए गए हैं, क्योंकि यह गार्ड हमेशा मॉड्यूल को मेमोरी में लोड करेगा, भले ही गार्ड गलत वापस आ गया हो, जिसका अर्थ है कि उपयोगकर्ता एक्सेस करने के लिए अधिकृत नहीं है। मार्ग।
• CanLoad - तय करता है कि क्या मॉड्यूल को लोड किया जा सकता है lazily, नियंत्रित करता है यदि एक मार्ग भी लोड किया जा सकता है। यह सुविधा मॉड्यूल के लिए उपयोगी हो जाता है जो आलसी लोड होते हैं। यदि गार्ड झूठे लौटते हैं तो वे लोड भी नहीं करेंगे।

यह एक ऐसा परीक्षण है जिसे मैं दोनों गार्डों पर एक फीचर मॉड्यूल के साथ करता हूं जो आलसी लोडेड है:

1. गार्ड टेस्ट को सक्रिय करें

आप नेटवर्क पृष्ठ के निचले भाग पर ध्यान देंगे कि उसने ३.५ एमबी के आकार के साथ २४ अनुरोध किए हैं जो ३.३४ सेकंड में स्थानांतरित हुए और पूरी तरह से ३.४ bottom सेकंड में लोड हुए।

1. कैनोलाड गार्ड टेस्ट

यहां आप बड़े अंतर को देखेंगे जब हमने CanLoad Guard का उपयोग किया था क्योंकि ब्राउज़र ने 9.2 एमबी के आकार के साथ केवल 18 अनुरोध किए थे, 2.64 सेकंड में परिष्करण परिष्करण और पूरी तरह से 2.59 सेकंड लोड किए गए।

यदि उपयोगकर्ता अधिकृत नहीं है, तो CanLoad Guard कभी भी मॉड्यूल डेटा को लोड नहीं करता है और यह आपको अधिक प्रदर्शन देता है क्योंकि लोड समय लगभग 1 सेकंड कम हो गया है और यह वेब पृष्ठों को लोड करने में बहुत बड़ा समय है, इसमें कोई संदेह नहीं है कि यह मॉड्यूल आकार पर निर्भर करता है।

युक्ति: यदि आप अपने प्रोजेक्ट पर परीक्षण करना चाहते हैं, तो सुनिश्चित करें कि Disable Cacheनेटवर्क टैब में चेकबॉक्स चेक किया गया है, यह पहली छवि में चिह्नित है

Comments

बस किसी को भ्रमित न करने के लिए .. 403 Forbbiden है, न कि अनधिकृत जो 401 है।

— hastrb

Answer 3

अन्य पोस्ट में टिप्पणियों से सवाल के बारे में "यदि मैं उपरोक्त परिदृश्य में canActivate का उपयोग करता हूं, तो क्या अंतर होगा?"

वास्तव में उपयोगकर्ता के लिए कोई अंतर नहीं होगा, उसे दोनों मामलों में पृष्ठ तक कोई पहुंच प्राप्त नहीं होगी। हालांकि एक छिपा हुआ अंतर है । यदि आप F12 दबाते हैं और स्रोत (क्रोम में) जहां फ़ाइल डाउनलोड करने के लिए ले जाते हैं। फिर आप देख सकते हैं कि कोड के साथ कैनएक्टिव फाइल के मामले में डाउनलोड किया गया है ( chunk.js )। भले ही आपके पास पृष्ठ तक कोई पहुंच न हो।

लेकिन canLoad के मामले में स्रोत कोड के साथ कोई chunk.js फ़ाइल नहीं होगी ।

तो जैसा कि आप देख सकते हैं कि यह सुरक्षा के लिए बहुत बड़ा प्रभाव है।

और निश्चित रूप से मत भूलो कि canLoad का उपयोग केवल LazyLoaded मॉड्यूल के लिए किया जा सकता है ।

Comments

मेरे नेटवर्क टैब में आलसी लोडिंग मॉड्यूल के लिए किसी भी चंक को देखने में असमर्थ लेकिन उम्मीद के मुताबिक काम करने वाले मार्ग मैं अपने मॉड्यूल को लोड करने की पुष्टि कैसे कर सकता हूं या नहीं?

— k11k2

@ k11k2 अगर आप यह देखना चाहते हैं कि कौन सी फाइल मॉड्यूल का हिस्सा debugger;है तो उस मॉड्यूल में से किसी एक घटक के लिए कंस्ट्रक्टर में एक स्टेटमेंट जोड़ें । फिर आप देख सकते हैं कि इसे एक अलग चंक के रूप में लोड किया गया था या मुख्य जैसे मॉड्यूल में शामिल किया गया था। यदि आपके पास एक आलसी मॉड्यूल में घटकों के संदर्भ हैं जो उस मॉड्यूल से अलग नहीं हैं, तो यह किसी भी तरह लोड हो सकता है। यदि आप यह देखते हैं कि यह या तो आपको JS फ़ाइलों के अलावा किसी अन्य चीज़ से फ़िल्टर कर रहा है, या आपको अपने आलसी मॉड्यूल को आम और 'वास्तव में आलसी' भागों में तोड़ने की आवश्यकता है।

— सिमोन_विवर

@ k11k2 मुझे लगता है कि आपके "आलसी लोडिंग मॉड्यूल" को लोड नहीं किया जा रहा है। सुनिश्चित करें कि आपने loadChildrenअपने आलसी मॉड्यूल के पथ के एक भाग के रूप में संपत्ति का उपयोग किया है ।

— hastrb

Answer 4

अनधिकृत उपयोगकर्ता को रोकने के लिए canActivate का उपयोग किया जाता है

एप्लिकेशन के संपूर्ण मॉड्यूल को रोकने के लिए canLoad का उपयोग किया जाता है

CanActivate का उदाहरण :

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

कैनडैड का उदाहरण :

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

Comments

भविष्य के पाठकों के लिए, canActive उदाहरण आलसी नहीं है, लेकिन canLoad है .. होने के कारण loadChildren। इसके अलावा, कोणीय का एक हालिया संस्करण है ..loadChildren: () => import('./user/user.module').then(m => m.UserModule)

— hastrb

बहुत ही सरल व्याख्या, इसे पसंद किया :)

— केटीएम

Answer 5

CanLoad गार्ड लेज़ी लोडेड मॉड्यूल की लोडिंग को रोकता है। हम आम तौर पर इस गार्ड का उपयोग तब करते हैं जब हम अनधिकृत उपयोगकर्ता को मॉड्यूल के किसी भी मार्ग पर नेविगेट नहीं करना चाहते हैं और तब भी रोकते हैं, तब भी मॉड्यूल का स्रोत कोड देखें।

कोणीय, कैनेटिक्ट गार्ड प्रदान करता है , जो अनधिकृत उपयोगकर्ता को मार्ग तक पहुँचने से रोकता है। लेकिन यह मॉड्यूल को डाउनलोड होने से नहीं रोकता है। स्रोत कोड को देखने के लिए उपयोगकर्ता क्रोम डेवलपर कंसोल का उपयोग कर सकता है। CanLoad Guard मॉड्यूल को डाउनलोड होने से रोकता है।

दरअसल, CanLoad लोड होने वाले मॉड्यूल की सुरक्षा करता है लेकिन एक बार मॉड्यूल लोड हो जाता है तो CanLoad गार्ड कुछ नहीं करेगा। मान लीजिए कि हमने अनधिकृत उपयोगकर्ता के लिए CanLoad गार्ड का उपयोग करते हुए एक मॉड्यूल लोडिंग की रक्षा की है। जब उपयोगकर्ता लॉग-इन करता है, तो वह मॉड्यूल लोड होने के लिए लागू होगा और हम उस मॉड्यूल द्वारा कॉन्फ़िगर किए गए बच्चों के पथों को नेविगेट करने में सक्षम होंगे। लेकिन जब उपयोगकर्ता लॉग-आउट हो जाता है, तब भी उपयोगकर्ता उन बच्चों के मार्गों को नेविगेट करने में सक्षम होगा, क्योंकि मॉड्यूल पहले से ही लोड है। इस मामले में अगर हम अनधिकृत उपयोगकर्ताओं से बच्चों के मार्ग की रक्षा करना चाहते हैं, तो हमें CanActivate गार्ड का उपयोग करने की भी आवश्यकता है ।

व्यवस्थापक लोड करने से पहले CanLoad का उपयोग करें :

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

AdminModule को लोड करने के बाद, AdminRout मॉड्यूल में हम अनधिकृत उपयोगकर्ताओं की तरह चिल्ड को बचाने के लिए CanActive का उपयोग कर सकते हैं :

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

Comments

तो एक का उपयोग कर सकते हैं दोनों canLoad और CanActivate?

— तारिदा जॉर्ज

Answer 6

यदि अनधिकृत उपयोगकर्ता अभी भी उस मॉड्यूल को लोड करता है तो सक्रिय करें। आपको निर्णय प्राप्त करने के लिए नोटबंदी की आवश्यकता है कि क्या इसे लोड किया जाना चाहिए।

Answer 7

यह ध्यान रखना महत्वपूर्ण है कि canLoad आपके स्रोत कोड को प्राप्त करने से किसी को नहीं रोकेगा। जब तक उपयोगकर्ता अधिकृत नहीं होता है .js ब्राउज़र द्वारा डाउनलोड नहीं किया जाएगा, लेकिन आप ब्राउज़र कंसोल पर एक आयात ('./ xxxxx.js') जारी करके मैन्युअल डाउनलोड को बाध्य कर सकते हैं।

मॉड्यूल नाम आसानी से आप अपने मार्गों परिभाषा पर main.js पर पाया जा सकता है।