When user is not logged in redirect to login. Reactjs
See this answer https://stackoverflow.com/a/43171515/208079. Perhaps someone with more rep than me can mark this as a duplicate.
The basic idea is to wrap routes that require authentication with a custom component (PrivateRoute in the example below). PrivateRoute will use some logic to determine if the user is authenticated and then either; allow the requested route to render, or redirect to the login page.
This is also described in the react-router training docs at this link https://reacttraining.com/react-router/web/example/auth-workflow.
Here is an implementation using the above as inspiration.
In App.js (or where your routing is happening)
import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import PrivateRoute from './PrivateRoute'
import MyComponent from '../src/MyComponent'
import MyLoginForm from '../src/MyLoginForm'
<Router>
<Route path="/login" component={MyLoginForm} />
<PrivateRoute path="/onlyAuthorizedAllowedHere/" component={MyComponent} />
</Router>
And the PrivateRoute Component
// This is used to determine if a user is authenticated and
// if they are allowed to visit the page they navigated to.
// If they are: they proceed to the page
// If not: they are redirected to the login page.
import React from 'react'
import AuthService from './Services/AuthService'
import { Redirect, Route } from 'react-router-dom'
const PrivateRoute = ({ component: Component, ...rest }) => {
// Add your own authentication on the below line.
const isLoggedIn = AuthService.isLoggedIn()
return (
<Route
{...rest}
render={props =>
isLoggedIn ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
}
/>
)
}
export default PrivateRoute
Ivan Hreskiv
I am a Python developer. I have been working as a programmer since 2015. I really enjoy this adorable language. I like to solve logical and mathematical issues using Python. Also I work in IT company in Ukraine. Most of my time I work as BE developer, but in my free time I write my own project on js. I have a Bachelor's degree in computer science. I do like programming. It is my passion. I have experience with developing web application with Django and Flask. My favorite database is postgresql, it is really awesome. I enjoy every time when I implement a new request or select, it is so convenient. I like to share my experience. But I really enjoy working with more experienced people. They can teach you new things and improve your skills.
Updated on July 08, 2022Comments
-
Ivan Hreskiv almost 2 years
My App looks like:
class App extends Component { render() { <Router> <div> <Route exact path='/login' component={Login} /> <Route exact path='/game' component={GameContainer} /> <Route exact path='/chat' component={ChatContainer} /> <Route exact path='/info' component={InfoContainer} /> </div> </Router> }
If the user visits a page under /game and is not logged in, I want to redirect them to the login page.
How to do it an elegant way in all routers?