Vue Маршрутизатор «Неперехваченная (в обещании) Ошибка: перенаправляется при переходе из« / home »в« / login »через навигационную защиту». - PullRequest
Новая
       35

Vue Маршрутизатор «Неперехваченная (в обещании) Ошибка: перенаправляется при переходе из« / home »в« / login »через навигационную защиту».

0 голосов
/ 03 августа 2020

Я использую Laravel в качестве внутреннего сервера и Vue для внешнего интерфейса моего приложения. Теперь у меня проблема с выходом из приложения. Я создал маршрут в Vue следующим образом: 

import { RouteConfig } from 'vue-router';
import store from '@/store';

const routes: Array<RouteConfig> = [
  {
    path: '/logout',
    name: 'Logout',
    beforeEnter: (to, from, next) => {
      store.dispatch('login/logout');
      next('/login');
    },
  },
];

export default routes;

, а в магазине у меня есть следующее действие для фактического выхода из системы: 

import { Commit, GetterTree } from 'vuex';
import userClient from '@/modules/core/api/userClient';
import { LoginState } from './types';

const namespaced = true;
const state: LoginState = {
  userToken: null,
  user: {},
  role: {},
  authentication: {},
};

const getters: GetterTree<LoginState, any> = {};

const actions = {
  async logout({ commit }: { commit: Commit }) {
    await userClient.logout();
    commit('clearUser');
  },
};

const mutations = {
  clearUser(state: any) {
    state.userToken = null;
    state.user = null;
    state.role = null;
    state.authentication = null;
  },
};

export default {
  namespaced,
  state,
  getters,
  actions,
  mutations,
};

Бэкэнд Laravel затем уничтожает Cook ie, в котором хранится JWT.

Теперь, когда я перехожу к маршруту /logout через this.$router.push('/logout'), я получаю следующую ошибку в браузере: 

vue-router.esm.js?8c4f:2062 Uncaught (in promise) Error: Redirected when going from "/home" to "/login" via a navigation guard.

Может ли кто-нибудь помочь мне решить эту проблему?

1 Ответ

0 голосов
/ 03 августа 2020

Вы неправильно используете навигационную защиту. Согласно документации Vue -Router :

Как следует из названия, средства навигации, предоставляемые vue -router, в основном используются для защиты навигации либо путем перенаправления или отмены.

Защитные устройства навигации не подходят для того, чего вы пытаетесь достичь. Почему бы просто не отправить действие выхода из системы непосредственно с помощью кнопки / ссылки?

Процесс выхода должен быть довольно простым.

  • Пользователь нажимает logout кнопку / ссылку.
  • Бэкэнд Laravel затем уничтожает Cook ie, в котором хранится JWT (в вашем случае).
  • Затем пользователь перенаправляется на страницу входа.

Нет необходимости в маршруте выхода (/logout).

В этом случае следующий поток, вероятно, будет более подходящим для вашего варианта использования

ComponentWithLogoutButtonOrLink. vue

<template>
....
<button @click="handleLogout">logout</button>
</template>

methods: {
  handleLogout() {
   this.$store.dispatch('login/logout');
  }
}
...