Private Routing using react router dom v5 & v6

What is Private Routing?

When user doesn’t allow to access to particular page or component in our react application . In the meanwhile , If user doesn’t have access to that page then we will redirect that page to “User do not have access” page.

For example in a office we have “Network Administrator / IT ” that has all the rights to access to all the pages , we can call him/her as “Admin” & we have “Manager” that has rights but with some restrictions & last but least we have “Normal Employee” that has minimal/ least access in our application. Now we have persons with different access control but it depends how we are implementing roles in our application like we are using Postgresql / mongoDB , that are providing options like enums ie:

Or like in Sql we can store roles in INT(2) for eg: “1” for Admin , “2” for Manager & “3” for employee

Lets Implement in our React Application

To Implement in React Application we haveto know api response we are getting, when we get roles in jwt token payload or directly in key node.

When we get roles in Jwt token:

When we get jwt token in the api response , then we need to decode that first, as we know jwt is nothing but base64 string divided into 3 parts ie: first is header then we have 2nd part ie payload where roles/role id is stored & in the last we have secret key , if you using default algorithm in jwt , then we can directly decode token or we can use jwt-decode package from npm library. To install that package you just need to run that command:

npm -i jwt-decode

After decoding that string we need to store that role/roleid in our application

We have different ways to store role/roleid in our application :

  1. In Redux State / User reducer
  2. Local Storage (Not recommended due to security reasons)
  3. Cookies( client side cookies)

To Store token in Cookies like :

Using React Router Dom v6

We can Implement using react router dom v6 with HOC(Higher Order Functions) . for eg: We have HOC like CheckPermission.jsx , there we can check the roleid of that user if condition doesn’t match then we will redirect user to “User Do Not Have Permission” page. refer to screenshot below:

And if you are using “useRoutes” hook in react router dom v6 then we can wrap our component using CheckAccess HOC like that below:

Using React Router Dom v5

In React Router Dom v5 we have two options to implement private routing :

  1. Using HOC(Higher Order Component)
  2. Using render method

In HOC (higher order component) we wrap the component as we have mentioned in v6 , but while using render method we made the condition while we are declaring the route , as we know Route is inbuild component of react router dom and in v5 we have render method where we are returning the component to be rendered. So we can declare like that:

Summary

In this story we will know the data/payload to store and get roles and render the component accordingly by using either HOC(higher order component) or by using render method which you can find in v5 only.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mukul Kathuria

Mukul Kathuria

Software engineer , worked in javascript frameworks like react node nest , next etc …, cyber security and python as well.