Доброго дня, пытаюсь сделать аутентификацию во вью + лара по Rest api.
В общем логика такая, при переходе на любую страницу проверяем есть ли в localstorage ключь с идентификатором, если нет то шли на /login, если есть то идет проверка идентификатора на сервере, если все ок переходим на желаемую страницу.
Почитал как работают хуки. Из прочитанного пытаюсь сделать что то типа такого:
import { createRouter, createWebHistory } from 'vue-router'
import Logon from '@/Logon.vue'
import Projects from '@/views/Projects.vue'
import Homepage from '@/views/Homepage.vue'
import Project from '@/views/Project.vue'
import Control from '@/views/Control.vue'
import ControlUsers from '@/views/Control-users.vue'
const routes = [
{
path: '/logon',
name: 'Logon',
component: Logon
},
{
path: '/',
name: 'Homepage',
component: Homepage
},
{
path: '/projects',
name: 'Projects',
component: Projects
},
{
path: '/project',
name: 'Project',
component: Project
},
{
path: '/control',
name: 'control',
component: Control
},
{
path: '/control/control-users',
name: 'control-users',
component: ControlUsers
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
if (to.name !== 'Logon' && !localStorage.getItem('authToken')) {
next({ name: 'Logon' })
} else next()
})
router.beforeEach((to, from, next) => {
if (to.name !== 'Logon' && localStorage.getItem('authToken')) {
next({ name: 'Homepage' }) //тут будет логика проверки токена на сервере
} else next()
})
export default router
Первый хук отрабатывает и шлет меня залогиниться, далее я логинюсь у меня появляется в localstorage биар токен. Но второй хук не работает, хотя если там вывести что то в консоль то это выводится, то есть хук срабатывает по сути, но вот не пересылает меня на главную страницу.
И вообще как то странно работает хук сам по себе, например я попробовал сделать так :
router.beforeEach((to, from, next) => {
if (!localStorage.getItem('authToken')) {
next({ name: 'Logon' })
} else next()
})
\\ а второй хук я убрал, и так тоже у меня не работает, по логике должно же если в if true, то выполни \\ условие, что ему не нравится в этом условии я не понимаю. Даже если напишу вот так:
const isAuth = false
router.beforeEach((to, from, next) => {
if (!isAuth)) {
next({ name: 'Logon' })
} else next()
})
Это тоже не работает, даже ошибки не выводит тупо останавливает загрузку контента? если жму на ссылки в хедере то выходят ошибки:
Uncaught (in promise) Error: Infinite redirect in navigation guard
at eval (vue-router.esm-bundler.js?6c02:2991)
Я понимаю что делаю что то не так, но что не могу понять.
