Sorry, The Door is locked…
We always encounter websites where we have to log in to be able to access some of the information that we want to know.
As a good example, We have companies like Amazon, where we need an account to log in as a buyer to buy some products, then another account to log in as an employee, so that we can access some info about our benefits, to punch in our timecard, salary etc, and then another account to log in as an administrator to acess informations such as inventories of products or status of some employees.
If we can put them all in one website, We have to make sure that only the people we want should have access to different part of that website and that logged-in user can only access the routes or pages that they are allowed to.
Enter… React-router’s Route ,Redirect, Switch.
These groupies can simplify and solve this seemingly complex problem.
Suppose we have the following four components which is imported by the component App:
import EmployeeEdit from ‘./components/Administrator/EmployeeEdit’;
import EmployeePage from ‘./components/Administrator/EmployeePage’;
import TimeElapsed from ‘./components/Employee/TimeElapsed’;
import TimeList from ‘./components/Employee/TimeList’;
So right now, anyone can have access to all these four components or pages.
But actually, we want only the employees to have access to the TimeElapsed and TimeList pages. We do not want them to have access to the All EmployeePage and EmployeeEdit pages.
On the other hand, we want only the Administrator to have access to the All EmployeePage and EmployeeEdit pages and we dont want them access to TimeElapsed and TimeList pages.
To implement that we have to have to add a login component for the employees and another login component for the administrator. This is what that component might look like:
For AdminLogin(This is just a simplified authentication example, in real life a backend is needed), this how it may be done:
And now we have to make some changes to the App function above:
We have to add useState hook to App, since AdminLogin is a child of App, this boolean and set function are those that we put as props to the login function component above, and so,
Take note of the changes we make in the App component.
First we add Redirect to the import like so:
import { Route, Switch, Redirect } from “react-router-dom”;
then, We added the AdminLogin component in App component and then make an if/else statement to both the EmployeePage and EmployeeEdit page, such that if logged in, you will have access or be directed to the page mentioned above, if not, you will be turn back to the log in page again.
We could do the same for the EmployeeLogin component. We will make an Employee log in function:
and update the App function so the final code for App component would be:
Take note that for the Administrator Login,
it is : isLoggedIn and setLoggedIn,
while for the Employee Log in, it is : isLoggedInEmployee and setLoggedInEmployee, just to differentiate them from that of Administrator Login.
Now if an employee attempted to peek inside the profile page of another employee he will not be able to do so. And if he, the employee ask the Administrator her password, we will presume she will growl at him because it is supposed to be a secret.