Настройка AuthService для работы с JWT — генерация и проверка токенов

Что такое AuthService?

"Сервис" тут можно сравнить с уютным кафе, куда ты заходишь за кофе. Это место, которое выполняет только свою задачу: подаёт твою любимую чашку капучино (или эспрессо). Так и наш AuthService — это центральное хранилище функционала, связанного с аутентификацией. Задачи сервиса:

1. Генерация JWT на сервере.
2. Валидация JWT.
3. Управление состоянием пользователя (например, текущий токен).
4. Обеспечение удобных методов для взаимодействия с сервером и клиентом.

Компоненты AuthService

Мы создадим сервис, который будет содержать:

• Генерацию JWT.
• Валидацию токенов.
• Локальную работу с токенами (получение, удаление).
• Методы для авторизации и аутентификации.

Шаг 1: настройка серверной части

Сначала подготовим серверный функционал, чтобы генерировать и проверять наши токены. Мы воспользуемся библиотекой jsonwebtoken. Если вы пропустили раздел про серверы, вот краткий пример серверного кода на Node.js.

Установка зависимостей

Убедитесь, что у вас установлена библиотека для работы с JWT:

npm install jsonwebtoken

Создание базового токена

import jwt from 'jsonwebtoken';

// Секретный ключ для подписи токена (храните его в env!)
const SECRET_KEY = 'supersecretkey';

// Интерфейс полезной нагрузки токена
interface TokenPayload {
  userId: number;
  email: string;
}

// Функция для генерации JWT
function generateToken(payload: TokenPayload): string {
  return jwt.sign(payload, SECRET_KEY, { expiresIn: '1h' }); // Токен действует 1 час
}

// Пример валидации JWT
function validateToken(token: string): TokenPayload | null {
  try {
    return jwt.verify(token, SECRET_KEY) as TokenPayload;
  } catch (error) {
    return null; // Если токен неверен или истек
  }
}

Объяснение кода:

1. Мы используем библиотеку jsonwebtoken для работы с токенами.
2. generateToken принимает полезную нагрузку (например, userId и email) и возвращает подписанный токен.
3. validateToken проверяет токен на подлинность. Если токен валиден, возвращается расшифрованная полезная нагрузка. Если нет — возвращается null.

Шаг 2: настройка AuthService на клиенте

Теперь перейдём к клиентской части. В React-приложении мы создадим AuthService, который будет управлять токенами.

Структура AuthService

Создаём файл src/services/AuthService.ts:

import axios from 'axios';

class AuthService {
  private baseURL: string = 'http://localhost:3001'; // URL сервера
  private tokenKey: string = 'auth_token'; // Ключ для хранения токена в localStorage

  // Сохранить токен в localStorage
  saveToken(token: string): void {
    localStorage.setItem(this.tokenKey, token);
  }

  // Извлечь токен из localStorage
  getToken(): string | null {
    return localStorage.getItem(this.tokenKey);
  }

  // Удалить токен из localStorage
  clearToken(): void {
    localStorage.removeItem(this.tokenKey);
  }

  // Авторизация пользователя
  async login(email: string, password: string): Promise<boolean> {
    try {
      const response = await axios.post(`${this.baseURL}/login`, { email, password });
      const { token } = response.data;
      this.saveToken(token); // Сохраняем токен в localStorage
      return true;
    } catch (error) {
      console.error('Ошибка входа:', error);
      return false;
    }
  }

  // Проверить, валиден ли токен
  async validateToken(): Promise<boolean> {
    const token = this.getToken();
    if (!token) return false;

    try {
      const response = await axios.post(`${this.baseURL}/validate-token`, { token });
      return response.data.valid; // Сервер вернёт { valid: true/false }
    } catch (error) {
      console.error('Ошибка при проверке токена:', error);
      return false;
    }
  }

  // Выход пользователя (очистка токена)
  logout(): void {
    this.clearToken();
  }
}

export default new AuthService();

Разбор кода AuthService

1. Методы для работы с токенами:

   • saveToken — сохраняет токен в localStorage.
   • getToken — извлекает токен из localStorage.
   • clearToken — удаляет токен (например, при выходе пользователя).

2. Методы для взаимодействия с сервером:

   • login — отправляет email и password на сервер. Если сервер возвращает токен, мы его сохраняем.
   • validateToken — отправляет токен на сервер для проверки подлинности.
   • logout — удаляет токен, чтобы выйти из аккаунта.

Шаг 3: интеграция AuthService с React

Теперь мы научимся использовать AuthService в нашем приложении.

Пример использования в компоненте

Создадим простой компонент Login:

import React, { useState } from 'react';
import AuthService from '../services/AuthService';

const Login: React.FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleLogin = async () => {
    const success = await AuthService.login(email, password);
    if (success) {
      setMessage('Успешный вход!');
    } else {
      setMessage('Ошибка входа. Проверьте данные.');
    }
  };

  const handleLogout = () => {
    AuthService.logout();
    setMessage('Вы вышли из системы.');
  };

  return (
    <div>
      <h1>Вход</h1>
      <input
        type="email"
        placeholder="Введите email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Введите пароль"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Войти</button>
      <button onClick={handleLogout}>Выйти</button>
      <p>{message}</p>
    </div>
  );
};

export default Login;

Ошибки и подводные камни

Обратите внимание на следующие моменты:

1. Никогда не храните чувствительные данные в localStorage. Это не самое безопасное место! В идеале используйте HTTP-only cookies.
2. Проверяйте срок действия токенов! Если токен истёк, запросы с ним не будут работать.
3. Ошибки серверов всегда нужно обрабатывать. Пользователям не понравятся "крутые" сообщения вида 500 Internal Server Error.

Теперь у нас есть готовый AuthService, который умеет управлять аутентификацией в приложении! Мы создали функционал генерации, проверки, сохранения и удаления токенов, а также связали это с интерфейсом.

2

Задача

Модуль 3: React, 15 уровень, 3 лекция

Недоступна

Проверка токена

Проверка токена

Открыть