Аутентификация и авторизация

В приложениях на Inferno, как и в других современных фронтенд-фреймворках, аутентификация и авторизация играют ключевую роль в обеспечении безопасности и управлении доступом. Аутентификация отвечает за проверку личности пользователя, а авторизация — за определение прав доступа к ресурсам приложения.

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

Для реализации аутентификации необходимо хранить состояние пользователя в приложении. Обычно для этого используют контекст (Context API) или глобальные состояния через сторонние менеджеры состояния, такие как Redux или MobX.

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

import { createContext } from 'inferno';

export const AuthContext = createContext(null);

Для предоставления состояния пользователю:

import { Component } from 'inferno';
import { AuthContext } from './AuthContext';

class AuthProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      login: this.login,
      logout: this.logout,
    };
  }

  login = (userData) => {
    this.setState({ user: userData });
  };

  logout = () => {
    this.setState({ user: null });
  };

  render() {
    return (
      <AuthContext.Provider value={this.state}>
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}

export default AuthProvider;

Реализация аутентификации

Аутентификация обычно выполняется через API, возвращающее токен или сессионные данные. В Inferno компоненты могут взаимодействовать с сервером с помощью fetch или Axios.

Пример функции логина:

export async function authenticate(email, password) {
  const response = await fetch('https://api.example.com/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  });

  if (!response.ok) {
    throw new Error('Ошибка аутентификации');
  }

  const data = await response.json();
  localStorage.setItem('authToken', data.token);
  return data.user;
}

После успешного логина состояние пользователя обновляется через AuthContext.

Авторизация и защита маршрутов

Для управления доступом к различным страницам приложения используются защищенные маршруты. В Inferno с маршрутизацией на основе inferno-router это реализуется через компонент-обертку.

Пример защищенного маршрута:

import { Route, Redirect } from 'inferno-router';
import { useContext } from 'inferno';
import { AuthContext } from './AuthContext';

function PrivateRoute({ component: Component, ...rest }) {
  const { user } = useContext(AuthContext);

  return (
    <Route
      {...rest}
      render={(props) =>
        user ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

Хранение и использование токенов

Токены доступа часто хранятся в localStorage или sessionStorage. Для безопасности рекомендуется хранить токены в HttpOnly cookies, если сервер поддерживает такой метод. При каждом запросе к API необходимо включать токен в заголовки:

const token = localStorage.getItem('authToken');

fetch('https://api.example.com/protected', {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

Обновление токенов и автоматический logout

Для длительных сессий необходимо предусмотреть refresh token и автоматический выход пользователя при истечении срока действия токена. Это можно реализовать через перехватчики запросов:

async function fetchWithAuth(url, options = {}) {
  const token = localStorage.getItem('authToken');

  const response = await fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      Authorization: `Bearer ${token}`,
    },
  });

  if (response.status === 401) {
    localStorage.removeItem('authToken');
    window.location.href = '/login';
  }

  return response;
}

Контроль прав доступа на клиенте

Авторизация на клиенте подразумевает проверку ролей или прав пользователя перед отображением компонентов. Это может быть реализовано через условный рендеринг:

function AdminPanel() {
  const { user } = useContext(AuthContext);

  if (!user || user.role !== 'admin') {
    return <p>Доступ запрещен</p>;
  }

  return <div>Административная панель</div>;
}

Лучшие практики

  • Использовать контекст или глобальное состояние для хранения информации о пользователе.
  • Хранить токены безопасно и обновлять их при необходимости.
  • Разграничивать аутентификацию и авторизацию для гибкости.
  • Применять защищенные маршруты и условный рендеринг компонентов.
  • Обеспечивать обработку ошибок при попытках доступа к защищенным ресурсам.

Эти подходы позволяют построить в Inferno приложения с надежной системой аутентификации и авторизации, минимизируя риски несанкционированного доступа и обеспечивая корректное управление пользователями.

Оглавление