Résolution de l'erreur générée par le garde de navigation : "Erreur lors de la redirection de '/' vers '/dashboard'"

Question

Lorsque je me connecte avec l'utilisateur, cela me redirige vers le tableau de bord comme prévu. Dès que je me déconnecte et que j'essaye de me reconnecter (même avec un autre utilisateur et sans rafraîchir la page) cela renvoie cette erreur dans la console :

Je souhaite uniquement rediriger l'utilisateur dans le tableau de bord s'il est authentifié, même si la page ne s'actualise pas, car j'ai remarqué que si j'actualise la page, je peux me connecter sans problème.

S'il vous plaît, aidez-moi si vous le pouvez. Voici un peu de code :

Méthode de connexion

methods: {
    ...mapActions({
    attempt: "auth/attempt",
    }),

    submit(credentials) {
      axios
        .post("http://127.0.0.1:8000/api/login", credentials)
        .then((res) => {
          // console.log(res.data);
          if (res.data.success) {
            
            this.attempt(res.data.token)
          }

          if (res.data.errors) {
            this.loginErrors = res.data.errors;
          } else {
            this.$router.push({ name: 'dashboard' })
          }

          
        })
        .catch((err) => {
          if (
            err.name !== "NavigationDuplicated" &&
            !err.message.includes(
              "Avoided redundant navigation to current location"
            )
          ) {
            
            console.log(err);
          }
        });
    },
  },

Chemin du tableau de bord dans le routeur

{
            path: '/dashboard',
            name: 'dashboard',
            component: DashboardComponent,
            beforeEnter: (to, from, next) => {
                if (!store.getters['auth/authenticated']) {
                    return next({
                        name: 'home'
                    })
                }
                next()
            }
        },

Essayez d'effectuer des opérations dans le stockage vuex

async attempt({ commit, state }, token) {
            if (token) {
                commit('SET_TOKEN', token)
            }

            // se non c'è
            if(!state.token) {
                return
            }
            
            try {
                await axios.get('http://127.0.0.1:8000/api/user')
                    .then(res => {
                        commit('SET_USER', res.data)
                    })
            } catch (e) {
                commit('SET_TOKEN', null)
                commit('SET_USER', null)
            }
        },

Autres de vuex

namespaced: true,
    state: {
        token: null,
        form: null,
    },

    getters: {
        authenticated(state) {
            return state.token && state.form
        },

        user(state) {
            return state.form
        },
    },

    mutations: {
        SET_TOKEN(state, token) {
            state.token = token
        },

        SET_USER(state, data) {
            state.form = data
        },

    },

Answer 1

Mise à jour : Vous devez attendre avant d'appeler l'API attempt() 的调用，否则 this.$router.push({ name: 'dashboard' }) （因此 /dashboard 路由上的守卫函数）将被调用< em>在对 /api/user pour terminer :

    submit(credentials) {
      axios
        .post("http://127.0.0.1:8000/api/login", credentials)
        .then(async (res) => {
          // console.log(res.data);
          if (res.data.success) {
            await this.attempt(res.data.token)
          }

          if (res.data.errors) {
            this.loginErrors = res.data.errors;
          } else {
            this.$router.push({ name: 'dashboard' })
          }
        })
        .catch((err) => {
          if (
            err.name !== "NavigationDuplicated" &&
            !err.message.includes(
              "Avoided redundant navigation to current location"
            )
          ) {
            
            console.log(err);
          }
        });
    },

---

next est une fonction qui doit être appelée exactement une fois ( et non renvoyée).
Essayez de changer le code de votre routeur comme suit :

        {
            path: '/dashboard',
            name: 'dashboard',
            component: DashboardComponent,
            beforeEnter: (to, from, next) => {
                if (!store.getters['auth/authenticated']) {
                    next({ name: 'home' })
                } else {
                    next()
                }
            }
        },