Как сделать protected routes в Nuxt3?

Ссылка скопирована
Nuxt.js
1 ответ

Как сделать защищенные роуты в nuxt? С помощью auth middleware не получается:

middleware/auth.global.ts:

export default defineNuxtRouteMiddleware((to, from) => {   const isLoggedIn = process.client     ? localStorage.getItem("isLoggedIn") === "true"     : "false";    if (to.path !== from.path) {     return;   }    if (!isLoggedIn && to.path !== "/login") {     return navigateTo("/login");   } else if (to.path !== "/" && isLoggedIn) {     return navigateTo("/");   } });

export default defineNuxtRouteMiddleware((to, from) => { const isLoggedIn = process.client ? localStorage.getItem("isLoggedIn") === "true" : "false"; if (to.path !== from.path) { return; } if (!isLoggedIn && to.path !== "/login") { return navigateTo("/login"); } else if (to.path !== "/" && isLoggedIn) { return navigateTo("/"); } });

По идее, если не isLoggedIn=> login, иначе если isLoggedIn и роут равен /login => /. Тут проблема в том, что будучи не isLoggedIn можно переходить по другим роутам, одним словом это логика работает только для /login и /, нужно написать проверку для всех роутов по отдельности? Чтоб, если isLoggedIn=false => нужно перенаправить на /login и остальные роуты тоже должны перенаправить, а иначе сделать /login disabled.

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Павел Админов Ответ

Для создания защищенных маршрутов (protected routes) в Nuxt 3, вы можете воспользоваться middleware. Middleware - это функции, которые выполняются перед обработкой маршрута и могут быть использованы для проверки авторизации пользователя перед доступом к определенным страницам.

Вот пример того, как можно создать защищенный маршрут в Nuxt 3 с использованием middleware:

1. Создайте файл middleware/auth.js в вашем проекте:

export default function ({ $auth, redirect }) {
  if (!$auth.loggedIn) {
    return redirect('/login')
  }
}

export default function ({ $auth, redirect }) { if (!$auth.loggedIn) { return redirect('/login') } }

2. В вашем файле nuxt.config.js добавьте middleware к вашему маршруту:

export default {
  router: {
    middleware: 'auth'
  }
}

export default { router: { middleware: 'auth' } }

3. Теперь, если вы хотите защитить определенный маршрут, вы можете добавить его в ваш файл pages/protected-page.vue:

 
  <div>
    <h1>Защищенная страница</h1>
  </div>
 
 
 
export default {
  middleware: 'auth'
}

<div> <h1>Защищенная страница</h1> </div> export default { middleware: 'auth' }

Теперь при попытке доступа к защищенной странице пользователь будет перенаправлен на страницу входа, если он не авторизован. Важно убедиться, что у вас установлен и настроен модуль аутентификации (например, @nuxtjs/auth-next), чтобы иметь возможность проверять статус авторизации пользователя.

Надеюсь, это поможет вам создать защищенные маршруты в вашем проекте Nuxt 3. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ code-review Нужен ли код-ревью React/TypeScript проекта? 1 ответ