Route Guards for Authentication
Create an example of a route guard that checks if a user is authenticated before allowing access to a protected route, redirecting to a login page if not authenticated.
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
Import necessary components from react and react-router-dom.
const isAuthenticated = () => {
// Logic to check if the user is authenticated
// It could be a check to localStorage, a context, or something else
return localStorage.getItem('user') ? true : false;
};
Define a function to check if the user is authenticated. This is a placeholder that you should replace with your actual authentication logic.
const ProtectedRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
isAuthenticated() ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
)} />
);
Create a ProtectedRoute component that takes a component and other props. It renders the component if isAuthenticated returns true, otherwise redirects to the login page. This acts as the route guard.
<ProtectedRoute path='/protected' component={ProtectedComponent} />
Example usage of the ProtectedRoute component to protect a route. Replace 'ProtectedComponent' with your actual component that should be protected.