private route in react js
import React from 'react';
import {
BrowserRouter,
Route,
Switch,
Redirect
} from 'react-router-dom';
import decode from 'jwt-decode';
import Home from './Home';
import Register from './Register';
import Login from './Login';
import PrivateComponent1 from './PrivateComponent1';
import PrivateComponent2 from './PrivateComponent2';
const isAuthenticated = () => {
const token = localStorage.getItem('token');
try {
if(token){
return true;
}
else{
return false;
}
} catch (error) {
return false;
}
}
function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
isAuthenticated() ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
}}
/>
)
}
/>
);
}
export default () => (
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/register" exact component={Register}/>
<Route path="/login" exact component={Login}/>
<PrivateRoute path="/private1/:id?" exact component={PrivateComponent1}/>
<PrivateRoute path="/private2" exact component={PrivateComponent2}/>
</Switch>
</BrowserRouter>
);const PrivateRoute = ({component: Component, ...rest}) => {
const {isAuthenticated} = rest;
return (
<Route {...rest} render={props => (
isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: {from: props.location}
}}/>
)
)}
/>
);
};
PrivateRoute.propTypes = {
isAuthenticated: PropTypes.bool.isRequired,
};
function mapStateToProps(state) {
return {
isAuthenticated: state.user.isAuthenticated,
};
}
export default connect(mapStateToProps)(PrivateRoute);
import React from 'react'
import {Route, Redirect} from 'react-router-dom'
const PrivateRoute = ({
component: Component,
isAuthenticated,
userLevel,
...rest
}) => (
<Route {...rest} component={(props)=>
isAuthenticated ? (
<Component {...props} />
):(
<Redirect to="/login" />
)
} />
)
export default PrivateRoute