Как сделать проверку присутствующего токена в localStorage на этапе маршрутизации?

Question

Я делаю регистрацию в своем приложении. Когда пользователь успешно проходит проверку и отправляет форму на сервер, token сохраняется в localStorage и перенаправляет его на страницу home. То есть, если токена нет, его нельзя перенаправить на страницу home.

Я реализую это в файле Home. js:

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

Но человек, который обзор моего приложения говорят:

Не лучший подход. Предположим, у нас может быть много таких компонентов - и у каждого из нас будет такой лог c для записи? А если он меняется - то бегать везде, чтобы изменить?

Это про логи c: {!token && <Redirect to="/" />} Я специально писал в Home. js file

И он предложил, как это можно сделать по-другому:

Лучшим вариантом будет проверка токена пользователя на этапе маршрутизации. То есть, разбить все маршруты в приложении на неавторизованные и авторизованные.

Это мой файл приложения. js, где в моем приложении есть маршрутизация:

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>
   )
  }
}

Как реализовать проверку пользовательского jwt-токена на этапе маршрутизации (в файле App. js, где расположены мои маршруты)?

Answer 1

Это то, как вы можете этого достичь. Вы можете изменить его в соответствии с вашим вариантом использования и поставить до начала switch.

import React from 'react';
import {Redirect, Route, Switch, BrowserRouter} from "react-router-dom";

function App() {
    const token = localStorage.getItem("myToken");
    return (
      <BrowserRouter>
        <div className="wrapper">
          <div className="content">

              <Route exact path="/home" render={() => (
                  token ?
                      (<Redirect to="/home"/>) :
                      (<Redirect to="/login"/>)
              )}/>
            <Switch>
                <Route exact path="/" render={()=><div>MAin</div>} />
              <Route path="/home" render={()=><div>Home</div>} />
              <Route path="/login" render={()=><div>Login</div>} />
            </Switch>

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

export default App;

Дайте мне знать, если вы не смогли этого получить.