Часть 5. Введение в аутентификацию Supabase

В этом посте мы добавим аутентификацию пользователей в наше приложение Nuxt с использованием Supabase.

Добавление формы для входа и регистрации 1. Создайте файл pages/auth.vue и добавьте ваш код. 2. Добавление навигации к странице аутентификации (добавление ссылки в шапке сайта). 3. Защита маршрутов - Создайте файл middleware/auth.global.js и добавьте ваш код. Пример моего кода:

// Массив маршрутов const routesRequiringAuth = [     '/profile',     '/cart' ] const routesNotRequiringAuth = [     '/auth',     '/reg' ]

// Middleware для проверки аутентификации пользователя export default defineNuxtRouteMiddleware((to) => {     const userStore = useUserStore()     const isAuthenticated = userStore.authenticated         // Проверка наличия требования аутентификации для текущего маршрута     const requiresAuth = routesRequiringAuth.includes(to.path)     const notRequiresAuth = routesNotRequiringAuth.includes(to.path)

// Если маршрут требует аутентификации, но пользователь не аутентифицирован, перенаправляем на /auth     if (requiresAuth && !isAuthenticated) {         return navigateTo('/auth')     }

// Если маршрут не требует аутентификации, но пользователь аутентифицирован, перенаправляем на /profile     if (notRequiresAuth && isAuthenticated) {         return navigateTo('/profile')     } })

4. Отображение состояния аутентификации в шапке. Я использовал Pinia, мой код выглядит примерно так:

function useSynchronizedCookie(key, defaultValue) {     const cookie = useCookie(key)     const state = ref(cookie.value || defaultValue)

watch(state, (newValue) => {         cookie.value = newValue     })         return state }

const authenticated = useSynchronizedCookie('authenticated', false)  const id = useSynchronizedCookie('id', null)  const role = useSynchronizedCookie('role', null)

После создания проверки входа, необходимо использовать эту часть кода в шапке (декомпозиция authenticated)

Заключение

Теперь у вас есть приложение, поддерживающее аутентификацию пользователей с помощью Supabase. В следующем посте я покажу, как работать с файлами и изображениями в Supabase.

Если у вас возникнут вопросы, не стесняйтесь задавать их!

#Nuxt #Vue #Supabase #Frontend #ВебРазработка #Аутентификация #OAuth