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

Mithril.js — это лёгкий и современный фронтенд-фреймворк для построения одностраничных приложений (SPA). Встраивание механизмов аутентификации и авторизации в приложения на Mithril требует понимания работы маршрутизации, компонентов и управления состоянием.

Основы аутентификации

Аутентификация — процесс проверки подлинности пользователя. В Mithril её можно реализовать на уровне компонентов и сервисов. Ключевым элементом является хранение токенов доступа и управление состоянием авторизованного пользователя.

Пример структуры сервиса аутентификации:

// auth.js
import m from 'mithril';

const Auth = {
    user: null,
    token: null,
    
    login(email, password) {
        return m.request({
            method: 'POST',
            url: '/api/login',
            body: { email, password }
        }).then(result => {
            this.token = result.token;
            this.user = result.user;
        });
    },

    logout() {
        this.token = null;
        this.user = null;
    },

    isAuthenticated() {
        return !!this.token;
    }
};

export default Auth;

Ключевые моменты:

  • Сервис хранит состояние пользователя и токена.
  • Метод login выполняет HTTP-запрос и сохраняет данные при успешной аутентификации.
  • Метод isAuthenticated упрощает проверку состояния авторизации в компонентах.

Защищённые маршруты

Mithril использует m.route для маршрутизации. Чтобы ограничить доступ к определённым страницам, проверку состояния можно внедрять на этапе разрешения маршрута.

import Auth from './auth';

const ProtectedRoute = (component) => {
    return {
        onmatch() {
            if (!Auth.isAuthenticated()) {
                m.route.set('/login');
                return;
            }
            return component;
        }
    };
};

Использование:

m.route(document.body, '/dashboard', {
    '/login': LoginComponent,
    '/dashboard': ProtectedRoute(DashboardComponent)
});

Пояснения:

  • onmatch вызывается перед отображением компонента.
  • При отсутствии авторизации выполняется редирект на страницу входа.
  • Такой подход позволяет централизованно управлять доступом без дублирования логики.

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

Для хранения токенов доступа применяются разные стратегии:

  • LocalStorage / SessionStorage Простой способ, но уязвим к XSS-атакам.
  • HTTP-only Cookies Более безопасный вариант, предотвращающий доступ из JavaScript.

Важные аспекты:

  • Никогда не хранить пароль в локальном хранилище.
  • Обновлять токены через refresh mechanism.
  • Очищать токены при выходе из системы.

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

В дополнение к проверке маршрутов, авторизацию можно внедрять на уровне отдельных UI-компонентов, скрывая или показывая элементы в зависимости от прав пользователя.

const AdminPanel = {
    view() {
        return Auth.user && Auth.user.role === 'admin' 
            ? m('div', 'Панель администратора') 
            : m('div', 'Доступ запрещён');
    }
};

Особенности:

  • Проверка роли пользователя выполняется прямо в view.
  • Логика авторизации централизуется через сервис Auth.

Работа с API и токенами

Mithril предоставляет m.request для запросов к серверу. Токены доступа можно передавать в заголовках:

m.request({
    method: 'GET',
    url: '/api/protected-data',
    headers: { 'Authorization': `Bearer ${Auth.token}` }
}).then(data => {
    console.log(data);
});
  • Использование заголовка Authorization обеспечивает контроль доступа на сервере.
  • В случае истечения токена необходимо реализовать механизм автоматического обновления или перенаправления на вход.

Пример комплексной интеграции

const DashboardComponent = {
    oninit() {
        if (!Auth.isAuthenticated()) m.route.set('/login');
        else {
            m.request({
                method: 'GET',
                url: '/api/dashboard',
                headers: { 'Authorization': `Bearer ${Auth.token}` }
            }).then(data => this.data = data);
        }
    },
    view() {
        if (!Auth.isAuthenticated()) return null;
        return m('div', [
            m('h1', 'Дашборд'),
            this.data ? m('pre', JSON.stringify(this.data, null, 2)) : m('p', 'Загрузка...')
        ]);
    }
};
  • oninit выполняет проверку авторизации и подгрузку защищённых данных.
  • view рендерит контент только после успешной аутентификации.

Советы по организации кода

  1. Сервисы аутентификации — хранить в отдельном модуле.
  2. ProtectedRoute — использовать для всех защищённых страниц.
  3. Централизация токена — упрощает поддержку и изменение логики авторизации.
  4. Минимизация повторного кода — проверка авторизации через Auth.isAuthenticated() вместо дублирования условий.

Эти подходы обеспечивают масштабируемость и надёжность системы аутентификации в приложениях на Mithril.

Оглавление