How to check for token in localStorage on the stage of the routing?

I do check in my application. When the user has successfully passed validation and submitted a form to the server, the token is stored in localStorage and there is a redirect to the home page. Ie if the token is not to get to the home page impossible.

I've implemented this in the file Home.js here it is:

const Home = () => {
 const token = localStorage.getItem("myToken")
 return (
the <div>
 {!token && <Redirect to="/" />}
<Header/>
 <h1 >Home page</h1>
</div>
)
}

But the person who checked my application, wrote:

Not the best approach. For example we can have a lot of these components - and we each have a logic to write? But if it changes then run everywhere to change?

It is about what the logic :
{!token && <Redirect to="/" />}
I napisal specifically in the file Home.js

And it is suggested how it can be done differently:

The best option would be to check the user token in the stage of routing that is to share all the ranting in the application to an unauthorized and authorized


This is my file App.js where I have the routing of my application:

const history = createBrowserHistory();

class App extends React.Component {
 render(){ 
 return (
 <BrowserRouter history={history}> 
 <div className="wrapper">
 <div className="content">

<Switch>
 <Route exact path="/" component={SignupForm} /> 
 <Route path="/home" component={Home} />
 <Route path="/login" component={LoginForm} />
</Switch>

</div>
</div>
</BrowserRouter>
)
}
}


And I have a question. How to check for token in localStorage on the stage of the routing(in the file App.js)?
April 19th 20 at 12:29
2 answers
April 19th 20 at 12:31
Solution
googling the word protected route react
https://dev.to/skylerwebdev/setting-up-a-private-r...

the idea is that to make a wrapper for the ranting and authorization, and do something like this

<Route exact path="/" component={SignupForm} /> 
<ProtectedRoute path="/home" component={Home} /> {/* if which will redirect to "/" */}
<Route path="/login" component={LoginForm} />


https://medium.com/@s4y.solutions/react-route-4-pr...
thank you, I'm probably being stupid, but something I do not understand this article:
https://medium.com/@s4y.solutions/react-route-4-pr...
I do not understand how this way you can check whether there is a token in localStroge or not...
You can even a little to help me to adapt what you wrote in my App.js? - Rosalee.Schroeder commented on April 19th 20 at 12:34
April 19th 20 at 12:33
Solution
For such purposes it is more correct to use the private route.
import React from 'react';
import { Route, Redirect, useLocation } from 'react-router-dom';

export const PrivateRoute = (props) => {
 const token = localStorage.getItem("myToken");
 const location = useLocation();

 if (token) {
 return <Route {...props} />
}

 return (
 <Redirect to={{ pathname: '/', state: { from. location } }} />
);
};


// Use The Private Route
import { PrivateRoute } from './PrivateRoute';
import { Home } from './Home';

<PrivateRoute path="/home">
 <Home />
</PrivateRoute>
thank you but I don't understand how to implement it in the file where my routing ie App.js. The examiner said that the test should be there:

const history = createBrowserHistory();

class App extends React.Component {
 render(){ 
 return (
 <BrowserRouter history={history}> 
 <div className="wrapper">
 <div className="content">

<Switch>
 <Route exact path="/" component={SignupForm} /> 
 <Route path="/home" component={Home} />
 <Route path="/login" component={LoginForm} />
</Switch>

</div>
</div>
</BrowserRouter>
)
}
}
- Rosalee.Schroeder commented on April 19th 20 at 12:36
@Rosalee.Schroeder, PrivateRoute is a separate component, you just have to import it into the file App.js and instead of the usual Route where he needed to use PrivateRoute. - gladyce_Mohr51 commented on April 19th 20 at 12:39
@Rosalee.Schroeder, I import Home provided for example, you have it already imported use it correctly - gladyce_Mohr51 commented on April 19th 20 at 12:42
@gladyce_Mohr51, I'm going to move the question of the categories React in a category where there are few subscribers. After a couple of days I will, though. Don't want to just so other people who has been assigned this task(and asked several people) saw my code and your response. - Rosalee.Schroeder commented on April 19th 20 at 12:45

Find more questions by tags SolidWorks