Есть два основных подхода для аутентификации пользователя

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

При этом подходе вы храните информацию о сессии в базе данных или хранилище сессий и передаете идентификатор сессии пользователю.

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

Вот как это работает:

- Пользователь делает запрос на вход в систему, и он отправляется на внутренний сервер..
- Бэкэнд создает сессию с использованием секретного ключа и сохраняет данные в хранилище сессий.
- Сервер отправляет клиенту cookie с уникальным идентификатором сессии.
- Пользователь делает новый запрос, и браузер отправляет идентификатор сессии вместе с запросом.
- Сервер аутентифицирует пользователя по идентификатору сессии.

Аутентификация на основе JWT

В подходе на основе JWT информация о сессии не хранится в хранилище сессий.

Вся информация доступна в токене.

Представьте себе, что вы получаете авиабилет вместе со всеми деталями, имеющимися на билете, но в закодированном виде.

Вот как это работает:

- Пользователь делает запрос на вход в систему, и он отправляется на внутренний сервер.
- Сервер проверяет учетные данные и выдает JWT. JWT подписывается с помощью закрытого ключа и не требует хранения сессии.
- JWT передается клиенту либо в виде cookie, либо в теле ответа. У обоих подходов есть свои плюсы и минусы.
- При каждом последующем запросе браузер отправляет cookie с JWT.
- Сервер проверяет JWT с помощью секретного закрытого ключа и извлекает информацию о пользователе.

#jwt #auth

Есть инструмент для облегчения миграции с миксинов на композаблы - vue-mixable
Автор - член Vue.js команды Linus Borg

#mixins

Такая забавная статья про CSS попалась

Автор хочет типизацию как в TypeScript, но только для CSS

#css #ts

// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

Во Vue можно создать собственный обработчик ошибок и ворнингов для лучшей обработки ошибок для улучшения UX.

Например, вместо того, чтобы приложение падало, если ошибка не была обработана, вы можете показать специальный экран ошибки и попросить пользователя обновить страницу или сделать что-то еще.

Обработчик ворнингов работает только в dev режиме.

#tip

Для чего нужны tsconfig.node.json, tsconfig.json, (tsconfig.vitest.json)?

В проектах Vue, созданных с помощью Vite, используются несколько файлов конфигурации TypeScript, каждый из которых играет свою роль в компиляции и тестировании TypeScript-кода.

tsconfig.json:

- Основной файл конфигурации TypeScript.
- Определяет глобальные настройки TypeScript для всего проекта, такие как целевая версия JavaScript, модульная система, пути к файлам и т.д.
- Может включать ссылки на другие файлы конфигурации TypeScript (extends, references).
- tsconfig.json по умолчанию не используется в Vite для компиляции кода.

tsconfig.node.json:

- Конфигурация TypeScript для среды Node.js.
- Определяет настройки TypeScript, специфичные для компиляции кода в Node.js.
- Используется Vite для компиляции TypeScript-кода серверной части приложения.

#vite #ts #nodejs

0 == "0"
// true

0 == []
// true

"0" == []
// false

Волшебство JavaScript

#js

Вроде бы еще совсем недавно размер node_modules на пустом Vue проекте был 150Мб, и вот уже 600...

#npm

#npm #meme

При попытке пользователя уйти с сайта (exit-intent), можно показывать сообщение (мольба остаться, подарок суперскидки, предложение сохранить сделанные изменения и т.п.)

Вот пример Vue 3 композабла для этого

#tip

Все браузеры кроме Firefox поддерживают View Transitions API - это примерный аналог анимаций Transition во Vue.js

#animation

Распространенные ошибки при работе с Vue

Omitting the Key Directive on v-for
Prop Drilling
Watching Arrays the Wrong Way
Replacing Reactive State the Wrong Way
Unintentionally Mutating Props
Forgetting to Clean Up Your Manual Event Listeners
Expecting Changes to Non-Reactive Dependencies to Trigger Updates
Not Considering TypeScript
Destructuring Reactive Data
Calling Composables in the Wrong Place
Using v-html with User Provided Data
Unnecessary Manual DOM Manipulation

- Упущение key директивы для v-for
- Prop Drilling
- Неправильное наблюдение (watch) за массивами
- Замена реактивного состояния неправильным способом
- Изменение пропсов
- Забывание ручной очистки Event Listeners
- Ожидание, что изменения в нереактивных зависимостях вызовут обновления в реактивных переменных
- Не рассматривание для использования TypeScript
- Деструктуризация Reactive данных
- Вызов composables в неправильных местах
- Использование v-html с данными, полученными от пользователя
- Ненужные ручные манипуляции с DOM

#tip

В решениях Избиркома РФ попадаются такие фразы:

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

Вот так. Теперь мы, значит, программные изделия точим...

#meme

Я полез по форумам и документации. Начал натягивать это все на глобус конкретного проекта и столкнулся с тем, с чем сталкивается, кажется, 100% (??) команд – что такое фича? чем фича отличается от энтити? А вот этот вот конкретный кусок кода – это что? Куда его положить? На форумах горели костры священных войн. Одни говорили, что в документации все написано, другие кричали, что определения некорректны. Третьи спорили, что куда и в каком виде можно вкладывать.

В итоге, сложилось ощущение, что FSD к нам пришел, как Троянский конь к воротам Трои и за красивой оберткой скрывается потенциальный портал в ад и бесконечные споры в команде. Это мне точно не подходило.

Бесценный опыт IT команды Спортмастера с FSD

#fsd #architecture

Как вам такое?

#java #gwt

Почти анекдот получился

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

Потратил несколько дней, начальнику показываю. Он так одним глазом смотрит и говорит:

- Это все теперь не надо. У нас будет одна кнопка, пользователь на нее нажимает, и AI чатбот с него всю информацию в режиме голосового диалога собирает. Круто?

Че тут скажешь, конечно круто. Космос, ёпта...

#meme

Кое-что новое

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

<!-- <MyComponent> template -->
<div>
  <slot :text="msg"></slot>
</div>

<MyComponent v-slot="{ text }">
  {{ text }}
</MyComponent>

Часто нужно и событие из слота переслать в ребенка. Напрямую сделать это нельзя, но можно также пропсом передать слоту ссылку на метод в ребенке, который тот и вызовет по событию:

<!--   FormField   -->
<script>
const touched = ref(false);
</script>

<template>
  <div class="form-field">
    <slot :touch="() => { touched = true }" />
    ...    
  </div>
</template>

<!-- использование -->
<FormField v-slot="{ touch }">
  <BaseInput @input="touch()" />
</FormField>

Этот хак бывает очень полезен и не выходит за рамки правила: "Пропсы вниз, события вверх".

#tip #slots

В комментариях снова загорелись огни миниско-климовской войны, захотелось порассуждать

Курсы надо отделать от их авторов. Не полностью, но всё же.

Сравнивать Климова и Минина некорректно, потому что к Климову в техническом плане хоть и есть вопросы и несогласие с чем-то, но у него есть Curriculum Vitae ("жизненный путь") в разработке ПО. Есть определенные знание и опыт.

Минин же - это боец ММА с 2-3 годами опыта просто говорящая голова, читающая по суфлеру, что дают, и основная задача которого - получение прибыли на чем угодно и вне зависимости от последующих успехов учеников.

Так же как с начиткой художественного произведения для аудиокниг, - чтец может как подчеркнуть его красоту, так и полностью испортить впечатление от него. И зачастую, это субъективно для слушателя.

А вот сравнивать курсы и их пользу можно. Но я не буду, потому что нет статистических данных. Неоспоримая польза от миниских курсов это появление конкуренции, что на рынке всегда хорошо. И неявная польза для Климова (если, конечно, ему важней репутация, чем заработок) - избавление от конкретных вкатунов, которым милее мининский подход.

То есть, если выбирать из этих двоих что-то типа ментора, ответ очевидный. Если смотреть на курсы - уже не такой очевидный.

Как вообще учиться IT?

Хорошие проверенные временем книжки. Хорошие бесплатные курсы от проверенных авторов, в том числе, университетов типа МГУ и MIT (#learning). Сообщество, где можно задать вопрос. Желание познавать.


#learning #minin #klimov

Компоненты Vue могут иметь статичные метаданные:

// LiveUsersWidget.vue
<script setup>
defineOptions({
  columns: 3,
});
</script>

import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;

Варианты использования:

- Сохранение номеров версий для отдельных компонентов
- Пользовательские флаги для инструментов сборки, чтобы по-разному обрабатывать компоненты
- Добавление кастомного функционала к компоненту, помимо стандартного из Options API и т.д.

#tip

Вышла Vue 3.5.0-alpha5

В ней уже есть useTemplateRef - функция, заменяющая нынешний способ определения шаблонного рефа (template ref).

Основные проблемы старой реализации - неочевидность привязки переменной в скрипте по имени к элементу в шаблоне и неудобство использования шаблонного рефа в composable функциях.

Теперь привязка будет по строковому ключу

#vuejs