Menyelesaikan ralat yang ditimbulkan oleh pengawal navigasi: "Ralat semasa mengubah hala daripada '/' ke '/papan pemuka'"

Question

Apabila saya log masuk dengan pengguna ia mengubah hala saya ke papan pemuka seperti yang dijangkakan. Sebaik sahaja saya log keluar dan cuba log masuk semula (walaupun dengan pengguna lain dan tanpa menyegarkan halaman) ia mengembalikan ralat ini dalam konsol:

Saya hanya mahu mengubah hala pengguna dalam papan pemuka jika disahkan, walaupun halaman itu tidak dimuat semula, kerana saya perasan bahawa jika saya memuat semula halaman, saya boleh log masuk tanpa sebarang masalah.

Tolong bantu saya jika anda boleh. Berikut ialah beberapa kod:

Kaedah log masuk

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);
          }
        });
    },
  },

Laluan papan pemuka dalam penghala

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

Cuba lakukan operasi dalam storan 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)
            }
        },

Lain-lain daripada 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

Kemas kini: Anda perlu menunggu sebelum memanggil attempt() 的调用，否则 this.$router.push({ name: 'dashboard' }) （因此 /dashboard 路由上的守卫函数）将被调用在对 /api/user API untuk melengkapkan:

    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 adalah fungsi yang sepatutnya dipanggil sekali ( tidak dikembalikan).
Cuba tukar kod dalam penghala anda kepada:

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