<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Как проверить токен jwt на фронте и передать его в backend]]></title><description><![CDATA[<p dir="auto">Этот код реализует проверку наличия JWT-токена в браузере и, при его наличии, выполняет валидацию токена на сервере.</p>
<pre><code class="language-js">const tokenCheck = () =&gt; {
    const token = localStorage.getItem('jwt');

    if(token) {
      auth.checkToken()
      .then((res) =&gt; {
        if(res) {
          enableLogin();
          setUserEmail(res.email);
          navigate('/', {replace: true});
        }
      })
      .catch(err =&gt; console.warn(err));
    }
  }
</code></pre>
<hr />
<p dir="auto">Давай разберу пошагово:</p>
<ol>
<li><strong>Извлекает токен из <code>localStorage</code></strong>:</li>
</ol>
<pre><code class="language-js">const token = localStorage.getItem('jwt');
</code></pre>
<p dir="auto">Пытается получить сохранённый JWT-токен под ключом <code>'jwt'</code>.</p>
<ol start="2">
<li><strong>Проверяет, существует ли токен:</strong></li>
</ol>
<pre><code class="language-js">if (token) { ... }
</code></pre>
<p dir="auto">Если токена нет — функция завершает работу.</p>
<ol start="3">
<li><strong>Отправляет запрос на сервер для проверки токена:</strong></li>
</ol>
<pre><code class="language-js">auth.checkToken()
</code></pre>
<p dir="auto">Предполагается, что <code>auth.checkToken()</code> — это асинхронная функция (например, <code>fetch</code> или <code>axios</code>), которая отправляет токен на бэкенд и проверяет его валидность. Обычно такой эндпоинт возвращает данные пользователя (например, email), если токен действителен.</p>
<ol start="4">
<li><strong>Обрабатывает успешный ответ</strong>:</li>
</ol>
<pre><code class="language-js">.then((res) =&gt; {
  if (res) {
    enableLogin();          // Например, активирует UI-состояние "авторизован"
    setUserEmail(res.email); // Сохраняет email пользователя в состояние (например, через React-хук)
    navigate('/', { replace: true }); // Перенаправляет на главную страницу, заменяя текущую запись в истории
  }
})
</code></pre>
<ul>
<li>Если сервер вернул валидные данные (<code>res</code> не <code>null</code>/<code>undefined</code>),</li>
<li>приложение считает пользователя авторизованным и обновляет UI/состояние,</li>
<li>а затем перенаправляет пользователя на корневой маршрут (<code>/</code>), <strong>заменяя</strong> текущую страницу в истории навигации (используется <code>replace: true</code> → пользователь не сможет вернуться кнопкой «Назад» на страницу входа или загрузки).</li>
</ul>
<ol start="5">
<li><strong>Обрабатывает ошибки</strong>:</li>
</ol>
<pre><code class="language-js">.catch(err =&gt; console.warn(err));
</code></pre>
<p dir="auto">При ошибке (например, токен просрочен, сервер недоступен) - просто выводит предупреждение в консоль, но не прерывает выполнение.</p>
<p dir="auto">Функция <code>tokenCheck</code> - это типичный механизм «тихой» автоматической авторизации при запуске приложения: если токен есть и валиден, пользователь сразу считается вошедшим в систему и перенаправляется на главную страницу.</p>
]]></description><link>https://forum.exlends.ru/topic/303/kak-proverit-token-jwt-na-fronte-i-peredat-ego-v-backend</link><generator>RSS for Node</generator><lastBuildDate>Sat, 17 Oct 2026 03:38:41 GMT</lastBuildDate><atom:link href="https://forum.exlends.ru/topic/303.rss" rel="self" type="application/rss+xml"/><pubDate>Wed, 12 Nov 2025 07:12:54 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Как проверить токен jwt на фронте и передать его в backend on Fri, 14 Nov 2025 01:47:30 GMT]]></title><description><![CDATA[<p dir="auto">Я ранее с таким не сталкивался. Благодарю за полезный материал)))</p>
]]></description><link>https://forum.exlends.ru/post/971</link><guid isPermaLink="true">https://forum.exlends.ru/post/971</guid><dc:creator><![CDATA[itrace]]></dc:creator><pubDate>Fri, 14 Nov 2025 01:47:30 GMT</pubDate></item></channel></rss>