Menyelesaikan ralat yang ditimbulkan oleh pengawal navigasi: "Ralat semasa mengubah hala daripada '/' ke '/papan pemuka'"
P粉143640496
P粉143640496 2024-02-21 12:18:23
0
1
398

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

    },

P粉143640496
P粉143640496

membalas semua(1)
P粉771233336

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()
                }
            }
        },
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!