Блог

Кто-нибудь может посоветовать по этому вопросу?

У меня есть приложение Laravel с интерфейсом Vue, подключающееся к API с помощью Laravel Sanctum. (в том же приложении) Я пытаюсь настроить защиту аутентификации, чтобы доступ к маршрутам был возможен только после аутентификации с помощью API.

Я подключаюсь через действие состояния следующим образом:

       async getAuthenticatedUser({ commit }, params) {
          await axios.get('api/auth-user', { params })
              .then(response => {
                  commit('SET_AUTHENTICATED', true)
                  commit('SET_AUTHENTICATED_USER', response.data)
                  localStorage.setItem('is-authenticated', 'true')

                  return Promise.resolve(response.data)
              })
              .catch(error => {
                  commit('SET_AUTHENTICATED', false)
                  commit('SET_AUTHENTICATED_USER', [])
                  localStorage.removeItem('is-authenticated')

                  return Promise.reject(error.response.data)
              })
      },
 

Свойство state authenticated устанавливается следующим образом:

 const state = () => ({
      authenticated: localStorage.getItem('is-authenticated') || false,
      authUser: [],
  })
 

У меня есть следующая защита, проверяющая аутентификацию. Если я не подписан в приложении, приложение правильно перенаправляет меня обратно на экран входа в систему, когда я получаю доступ к маршруту с атрибутом requiresAuth.

Однако, когда я пытаюсь войти в систему, я получаю Redirected when going from "/login" to "/dashboard" via a navigation guard.

 router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (store.getters["Auth/isAuthenticated"]) {
      next()
      return
    }
    next('/login')
  }

  if (to.matched.some((record) => record.meta.requiresVisitor)) {
    if (! store.getters["Auth/isAuthenticated"]) {
      next()
      return
    }
    next('/dashboard')
  }

  next()
})
 

Если это безопасно игнорировать, и вы используете vue-router ^3.4.0 , вы можете сделать:

 import VueRouter from 'vue-router'

const { isNavigationFailure, NavigationFailureType } = VueRouter
...
this.$router.push(fullPath).catch(error => {
  if (!isNavigationFailure(error, NavigationFailureType.redirected)) {
    throw Error(error)
  }
})