Как можно сделать проверку наличия токена в localStorage на этапе роутинга?

Question

[ghrtghrtq]

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

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

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

Но человек, который проверял мое приложение, написал:

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

Это он про то что логику :
{!token && <Redirect to="/" />}
я напиисал конкретно в файле Home.js

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

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

Это мой файл App.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>
   )
  }
}

И у меня вопрос. Как можно сделать проверку наличия токена в localStorage на этапе роутинга(в файле App.js)?

Answer 1

[hzzzzl]

погугли по слову protected route react
https://dev.to/skylerwebdev/setting-up-a-private-r...

идея такая, что сделать обертку для роутов с авторизацией, и сделать как то так

<Route exact path="/" component={SignupForm} /> 
<ProtectedRoute path="/home" component={Home} />  {/* если что, будет редиректить на "/" */}
<Route path="/login" component={LoginForm} />

https://medium.com/@s4y.solutions/react-route-4-pr...

Comments

[ghrtghrtq]

спасибо, я наверное туплю, но что-то я не понял эту статью:
https://medium.com/@s4y.solutions/react-route-4-pr...
Не понимаю как таким способом можно проверять есть ли токен в localStroge или нет...
Можете хоть немножно помочь мне адаптировать то что вы написали в моем App.js?

Answer 2

[Тигран Абрамян]

Для таких целей правильнее использовать приватный роут.

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 Private Route
import { PrivateRoute } from './PrivateRoute';
import { Home } from './Home';

<PrivateRoute path="/home">
  <Home />
</PrivateRoute>

Comments

[ghrtghrtq]

спасибо но только я не понимаю как это внедрить в файл где мой роутинг тоесть в App.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>
   )
  }
}

[Тигран Абрамян]

ghrtghrtq, PrivateRoute это отдельный компонент, просто вы должны импортировать его в файл App.js и вместо обычных Route там где он нужен, использовать PrivateRoute.

[Тигран Абрамян]

ghrtghrtq, я импорт Home предоставил для примера, у вас он уже импортирован правильно используйте его

[ghrtghrtq]

TAbrahamyan, я временно перемещу вопрос из категории React в категорию где мало подписчиков. Через пару дней верну обязательно. Не хочу просто чтобы другие люди которым задавали это задание(а задавали нескольким людям) подсмотрели мой код и ваш ответ.