Проверка авторизации Nuxt3 при перезагрузке страницы?
В приложении nuxt используется middleware для проверки авторизации пользователей. JWT токен для авторизации хранится в куки. При загруженном приложении, данные о пользователе хранятся в store (pinia) и защищенные роуты отображаются корректно при наличии авторизации, в том числе после перезагрузки страницы. Однако, если приложение собрать через generate, то при перезагрузки страницы происходит постоянный редирект, так как данные о пользователе отсутствуют в store. Если использовать уже загруженное приложение, то все работает корректно. При этом, если перезагружать на динамических страницах типа [id].vue, то также все работает.
Так и не могу понять в чем может быть проблема... Если кто-то сталкивался с подобным и нашел решение, буду благодарен
middleware/auth.js
import { useGlobalStore } from "@/stores/global" const store = useGlobalStore() export default defineNuxtRouteMiddleware(async (to, from) => { if (!store.person) { await store.getUserPerson() } if (!store.is_auth) { return navigateTo("/", { replace: true }) } }) |
import { useGlobalStore } from "@/stores/global" const store = useGlobalStore() export default defineNuxtRouteMiddleware(async (to, from) => { if (!store.person) { await store.getUserPerson() } if (!store.is_auth) { return navigateTo("/", { replace: true }) } })
store
export const useGlobalStore = defineStore("global", () => { const is_staff = ref(false) const is_auth = ref(false) const person = ref() const getUserPerson = async () => { if (process.client) { await myFetch("/auth/users/me/") .then((res) => { person.value = res if (res.access_date) { is_auth.value = true } is_staff.value = res.is_staff }) .catch(() => {}) } else { try { const { data: persons, error } = await useMyFetch("/auth/users/me/") if (persons && persons.value) { person.value = persons.value if (persons.value.access_date) { is_auth.value = true } is_staff.value = persons.value.is_staff } } catch (e) {} } } }) |
export const useGlobalStore = defineStore("global", () => { const is_staff = ref(false) const is_auth = ref(false) const person = ref() const getUserPerson = async () => { if (process.client) { await myFetch("/auth/users/me/") .then((res) => { person.value = res if (res.access_date) { is_auth.value = true } is_staff.value = res.is_staff }) .catch(() => {}) } else { try { const { data: persons, error } = await useMyFetch("/auth/users/me/") if (persons && persons.value) { person.value = persons.value if (persons.value.access_date) { is_auth.value = true } is_staff.value = persons.value.is_staff } } catch (e) {} } } })
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для проверки авторизации в Nuxt3 при перезагрузке страницы можно воспользоваться следующим подходом:
1. Создайте middleware для проверки авторизации. В этом middleware вы можете добавить логику проверки токена доступа или сессии пользователя.
```php
// middleware/auth.js
export default function ({ store, redirect }) {
if (!store.state.auth.loggedIn) {
redirect('/login')
}
}
```
2. Примените middleware к нужным маршрутам в файле маршрутизации `nuxt.config.js`.
```php
// nuxt.config.js
export default {
router: {
middleware: 'auth'
}
}
```
3. Убедитесь, что при авторизации пользователя сохраняется информация о его состоянии. Это можно сделать с помощью хранилища Vuex.
```php
// store/index.js
export const state = () => ({
auth: {
loggedIn: false,
user: null
}
})
export const mutations = {
SET_AUTH(state, auth) {
state.auth = auth
}
}
export const actions = {
login({ commit }, user) {
commit('SET_AUTH', { loggedIn: true, user })
},
logout({ commit }) {
commit('SET_AUTH', { loggedIn: false, user: null })
}
}
```
4. При успешной авторизации пользователя вызывайте соответствующий action Vuex для сохранения информации о его состоянии.
```php
// pages/login.vue
export default {
methods: {
login() {
// Ваша логика аутентификации
this.$store.dispatch('login', user)
}
}
}
```
Эти шаги позволят вам проверить авторизацию пользователя при перезагрузке страницы в Nuxt3. Пожалуйста, убедитесь, что ваша логика аутентификации безопасна и надежна.