Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

React RBAC - Skill Expresso - Nov 2022.pdf

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 18 Publicité
Publicité

Plus De Contenu Connexe

Plus récents (20)

Publicité

React RBAC - Skill Expresso - Nov 2022.pdf

  1. 1. ROLES AND PERMISSIONS BASED AUTHORIZATION FOR FRONTEND APP WITH @IMPELSYSINC/REACT-RBAC ...by Abhisek Pattnaik, CE Services
  2. 2. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. 1. Pre-requisites 2. Authorization 3. Existing Authorization in Frontend Apps 4. Introduction to React RBAC 5. Permissions 6. Usage 7. Available API 8. Custom Component 9. Demo 10. Relevant Resources 11. The End Agenda
  3. 3. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. I'm an expert. Please don't try to teach me. Don't say to me "You Don't Know JS" and Kend C. Dodds can help you. Basic understanding about • Javascript (optionally Typescript) and • ReactJS Prerequisites
  4. 4. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. • Authorization is the method of specifying access rights/privileges to resources. • Resource is defined as the entity viz. a component, a page, menu, etc. that is output in the application. • Action is defined as the type of operation (e.g. VIEW, GET, UPDATE, DELETE) that the user want to perform on the given resource. Authorization
  5. 5. Existing Authorization in Apps
  6. 6. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. • Hard-coded roles checking. • Cluttered if statements for each role. Existing Authorization in Frontend Apps
  7. 7. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. • Hard-coded permissions checking. • Lacks granular control. • Lacks standardization. • Difficult to extend. • Lacks flexibility. Existing Authorization in Frontend Apps
  8. 8. Introducing React RBAC
  9. 9. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. React-RBAC React RBAC is an open-source library with which you get more granular control of resources and actions and has easy to use API for defining the permissions and controlling the visibility of the application components. React RBAC
  10. 10. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. React-RBAC • Make permissions JSON for any role. • Statically define in Frontend or Dynamically fetch from Backend. The Permissions
  11. 11. React-RBAC Usage in Front-end
  12. 12. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. • Import and use the useRBAC hook to get the rbac context value. • Pass the rbac context value to the imported RBACProvider. Where do we fetch or define the permissions for the React RBAC library? The App Component
  13. 13. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. The Layout Component • You may fetch or define your permissions in a wrapper layout component.
  14. 14. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. React-RBAC Available APIs
  15. 15. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. React-RBAC Custom Permission Component
  16. 16. https://to.absk.im/react-rbac-demo Demo
  17. 17. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. React RBAC • Repository: https://github.com/ImpelsysInc/react-rbac • NPM: https://npm.im/@impelsysinc/react-rbac • Blog Article: https://to.absk.im/react-rbac-article Relevant Resources
  18. 18. QUESTIONS? React out via abhisek.pattnaik@impelsys.com https://about.me/abhisekp

×