Рет қаралды 376,441
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGra...
React Protected Routes allows you to make part of your React app exclusive to authorized users. Role-Based Authorization allows different levels of access based upon the assigned user roles. This tutorial utilizes React Router v6.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: bit.ly/AdvReac...
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevR...
- Master FAANG Coding Interviews: bit.ly/FAANGIn...
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
🔗 Source Code: github.com/git...
📬 Course Updates ➜ courses.davegr...
React Protected Routes | Role-Based Authorization | React Router v6
(00:00) Intro
(00:53) Welcome and Startup
(01:27) Install React Router v6
(02:17) Update index.js with RRv6
(03:38) Basic Routing Setup
(07:41) useAuth hook
(10:06) RequireAuth component v1
(14:38) Manage browser history
(18:50) Testing with backend authentication
(21:00) RequireAuth component v2
(24:26) Applying Role-Based Routing
(26:35) Object lookup for roles
(28:15) Testing role-based routes
(29:37) Last note on the Unauthorized component
☕ Buy Me A Coffee: www.buymeacoff...
🔗 React Router Version 6 in 20 minutes: • React Router v6 in 20 ...
🔗 React User Login and Authentication with Axios: • React User Login and A...
🔗 React Register Form with Validation, Axios and a11y: • React JS Form Validati...
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: • Node.js Full Course fo...
🔗 FontAwesome for React:
fontawesome.co...
🔗 RegExr for Regular Expressions: regexr.com/
📚 Accessible Form References:
WebAIM.org - Advanced Forms: webaim.org/tec...
WebAIM.org - Form Validation: webaim.org/tec...
MDN - Aria Attributes:
aria-invalid: developer.mozi...
aria-describedby: developer.mozi...
aria-live: developer.mozi...
aria-label: developer.mozi...
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.vi...
🔗 React Dev Tools Extension for Chrome:
chrome.google....
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.o...)
React Jobs: www.ziprecruit...
✅ Follow Me:
Github: github.com/git...
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about creating protected routes and role-based user authorization in React with React Router v6 helpful? If so, please share. Let me know your thoughts in the comments.
#react #protected #routes