SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
ROLES AND PERMISSIONS BASED
AUTHORIZATION FOR FRONTEND APP
WITH @IMPELSYSINC/REACT-RBAC
...by Abhisek Pattnaik, CE Services
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
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
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
Existing Authorization in Apps
Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
• Hard-coded roles
checking.
• Cluttered if statements for
each role.
Existing Authorization in Frontend Apps
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
Introducing React RBAC
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
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
React-RBAC Usage in Front-end
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
Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
The Layout Component
• You may fetch or define your permissions in a wrapper layout component.
Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
React-RBAC
Available APIs
Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
React-RBAC
Custom Permission Component
https://to.absk.im/react-rbac-demo
Demo
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
QUESTIONS?
React out via
abhisek.pattnaik@impelsys.com
https://about.me/abhisekp

Contenu connexe

Similaire à React RBAC - Skill Expresso - Nov 2022.pdf

API Design Principles Essential 
API Design Principles Essential API Design Principles Essential 
API Design Principles Essential Oracle Korea
 
Real-World RESTful Service Development Problems and Solutions
Real-World RESTful Service Development Problems and SolutionsReal-World RESTful Service Development Problems and Solutions
Real-World RESTful Service Development Problems and SolutionsMasoud Kalali
 
API Design – More than just a Payload Definition
API Design – More than just a Payload DefinitionAPI Design – More than just a Payload Definition
API Design – More than just a Payload DefinitionPhil Wilkins
 
Simplify DevOps with Microservices and Mobile Backends.pptx
Simplify DevOps with Microservices and Mobile Backends.pptxSimplify DevOps with Microservices and Mobile Backends.pptx
Simplify DevOps with Microservices and Mobile Backends.pptxssuser5faa791
 
What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...Shelly Megan
 
Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!Shelly Megan
 
Getting Started with API Management – Why It's Needed On-prem and in the Cloud
Getting Started with API Management – Why It's Needed On-prem and in the CloudGetting Started with API Management – Why It's Needed On-prem and in the Cloud
Getting Started with API Management – Why It's Needed On-prem and in the CloudRevelation Technologies
 
Everything to Know About React Re-Rendering: A Comprehensive Guide
Everything to Know About React Re-Rendering: A Comprehensive GuideEverything to Know About React Re-Rendering: A Comprehensive Guide
Everything to Know About React Re-Rendering: A Comprehensive GuideBOSC Tech Labs
 
Creating a World-Class RESTful Web Services API
Creating a World-Class RESTful Web Services APICreating a World-Class RESTful Web Services API
Creating a World-Class RESTful Web Services APIDavid Keener
 
Challenge to Implementing "Scalable" Authorization with Keycloak
Challenge to Implementing "Scalable" Authorization with KeycloakChallenge to Implementing "Scalable" Authorization with Keycloak
Challenge to Implementing "Scalable" Authorization with KeycloakHitachi, Ltd. OSS Solution Center.
 
Amandeep kumar final resume (1)
Amandeep kumar final resume (1)Amandeep kumar final resume (1)
Amandeep kumar final resume (1)Aman Batra
 
oracle-apac-developers-meetup-2-building-api-with-apiary-slides
oracle-apac-developers-meetup-2-building-api-with-apiary-slidesoracle-apac-developers-meetup-2-building-api-with-apiary-slides
oracle-apac-developers-meetup-2-building-api-with-apiary-slidesBoopathy Balasubramanian
 
Api design and prototype
Api design and prototypeApi design and prototype
Api design and prototypeDonghuKIM2
 
reactjs interview questions.pdf
reactjs interview questions.pdfreactjs interview questions.pdf
reactjs interview questions.pdfrohityadav23214
 
Best React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdfBest React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdfFuGenx Technologies
 
Best Practices for API Design to Keep Your App Secure, Scalable & Efficient
Best Practices for API Design to Keep Your App Secure, Scalable & EfficientBest Practices for API Design to Keep Your App Secure, Scalable & Efficient
Best Practices for API Design to Keep Your App Secure, Scalable & EfficientNordic APIs
 
Extending Enterprise Applications to mobile interfaces-Final
Extending Enterprise Applications to mobile interfaces-FinalExtending Enterprise Applications to mobile interfaces-Final
Extending Enterprise Applications to mobile interfaces-FinalRohit Dhamija
 
Ranjeet Mishra_JAVA_3+year exp
Ranjeet Mishra_JAVA_3+year expRanjeet Mishra_JAVA_3+year exp
Ranjeet Mishra_JAVA_3+year expRanjeet Mishra
 
REST API Doc Best Practices
REST API Doc Best PracticesREST API Doc Best Practices
REST API Doc Best PracticesMarta Rauch
 

Similaire à React RBAC - Skill Expresso - Nov 2022.pdf (20)

API Design Principles Essential 
API Design Principles Essential API Design Principles Essential 
API Design Principles Essential 
 
Oracle mcs overview 1029
Oracle mcs overview 1029Oracle mcs overview 1029
Oracle mcs overview 1029
 
Real-World RESTful Service Development Problems and Solutions
Real-World RESTful Service Development Problems and SolutionsReal-World RESTful Service Development Problems and Solutions
Real-World RESTful Service Development Problems and Solutions
 
API Design – More than just a Payload Definition
API Design – More than just a Payload DefinitionAPI Design – More than just a Payload Definition
API Design – More than just a Payload Definition
 
Simplify DevOps with Microservices and Mobile Backends.pptx
Simplify DevOps with Microservices and Mobile Backends.pptxSimplify DevOps with Microservices and Mobile Backends.pptx
Simplify DevOps with Microservices and Mobile Backends.pptx
 
What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...
 
Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!
 
Getting Started with API Management – Why It's Needed On-prem and in the Cloud
Getting Started with API Management – Why It's Needed On-prem and in the CloudGetting Started with API Management – Why It's Needed On-prem and in the Cloud
Getting Started with API Management – Why It's Needed On-prem and in the Cloud
 
Everything to Know About React Re-Rendering: A Comprehensive Guide
Everything to Know About React Re-Rendering: A Comprehensive GuideEverything to Know About React Re-Rendering: A Comprehensive Guide
Everything to Know About React Re-Rendering: A Comprehensive Guide
 
Creating a World-Class RESTful Web Services API
Creating a World-Class RESTful Web Services APICreating a World-Class RESTful Web Services API
Creating a World-Class RESTful Web Services API
 
Challenge to Implementing "Scalable" Authorization with Keycloak
Challenge to Implementing "Scalable" Authorization with KeycloakChallenge to Implementing "Scalable" Authorization with Keycloak
Challenge to Implementing "Scalable" Authorization with Keycloak
 
Amandeep kumar final resume (1)
Amandeep kumar final resume (1)Amandeep kumar final resume (1)
Amandeep kumar final resume (1)
 
oracle-apac-developers-meetup-2-building-api-with-apiary-slides
oracle-apac-developers-meetup-2-building-api-with-apiary-slidesoracle-apac-developers-meetup-2-building-api-with-apiary-slides
oracle-apac-developers-meetup-2-building-api-with-apiary-slides
 
Api design and prototype
Api design and prototypeApi design and prototype
Api design and prototype
 
reactjs interview questions.pdf
reactjs interview questions.pdfreactjs interview questions.pdf
reactjs interview questions.pdf
 
Best React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdfBest React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdf
 
Best Practices for API Design to Keep Your App Secure, Scalable & Efficient
Best Practices for API Design to Keep Your App Secure, Scalable & EfficientBest Practices for API Design to Keep Your App Secure, Scalable & Efficient
Best Practices for API Design to Keep Your App Secure, Scalable & Efficient
 
Extending Enterprise Applications to mobile interfaces-Final
Extending Enterprise Applications to mobile interfaces-FinalExtending Enterprise Applications to mobile interfaces-Final
Extending Enterprise Applications to mobile interfaces-Final
 
Ranjeet Mishra_JAVA_3+year exp
Ranjeet Mishra_JAVA_3+year expRanjeet Mishra_JAVA_3+year exp
Ranjeet Mishra_JAVA_3+year exp
 
REST API Doc Best Practices
REST API Doc Best PracticesREST API Doc Best Practices
REST API Doc Best Practices
 

Dernier

%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benoni%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benonimasabamasaba
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension AidPhilip Schwarz
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...masabamasaba
 
The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is insideshinachiaurasa2
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Steffen Staab
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...masabamasaba
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnAmarnathKambale
 
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareJim McKeeth
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastPapp Krisztián
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyviewmasabamasaba
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...SelfMade bd
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park masabamasaba
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...Jittipong Loespradit
 
%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Hararemasabamasaba
 
Artyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxArtyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxAnnaArtyushina1
 
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Bert Jan Schrijver
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfkalichargn70th171
 
tonesoftg
tonesoftgtonesoftg
tonesoftglanshi9
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplatePresentation.STUDIO
 

Dernier (20)

%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benoni%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benoni
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
 
The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare
 
Artyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxArtyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptx
 
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 

React RBAC - Skill Expresso - Nov 2022.pdf

  • 1. ROLES AND PERMISSIONS BASED AUTHORIZATION FOR FRONTEND APP WITH @IMPELSYSINC/REACT-RBAC ...by Abhisek Pattnaik, CE Services
  • 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. 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. 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
  • 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. 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
  • 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. 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. React-RBAC Usage in Front-end
  • 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. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. The Layout Component • You may fetch or define your permissions in a wrapper layout component.
  • 14. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. React-RBAC Available APIs
  • 15. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved. React-RBAC Custom Permission Component
  • 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