解決導航守衛引發的錯誤:'從'/'重定向到'/dashboard'時出現的錯誤”
P粉143640496
P粉143640496 2024-02-21 12:18:23
0
1
394

當我使用使用者登入時,它會按預期將我重定向到儀表板。一旦我登出並嘗試再次登入(即使使用另一個用戶,並且不刷新頁面),它就會在控制台中返回此錯誤:

如果經過身份驗證,我只想在儀表板中重定向用戶,即使頁面未刷新,因為我確實注意到,如果刷新頁面,我可以毫無問題地登入。

如果可以的話請幫幫我。以下是一些程式碼:

登入方式

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

路由器中的儀表板路徑

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

嘗試在 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)
            }
        },

其他來自 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

全部回覆(1)
P粉771233336

更新:應該等待對attempt() 的調用,否則this.$router.push({ name: 'dashboard' }) (因此/dashboard 路由上的守衛函數)將會被呼叫在對/api/user API 的呼叫完成之前:

    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 是一個應該準確呼叫的函數一次返回)。
嘗試將路由器中的程式碼變更為:

        {
            path: '/dashboard',
            name: 'dashboard',
            component: DashboardComponent,
            beforeEnter: (to, from, next) => {
                if (!store.getters['auth/authenticated']) {
                    next({ name: 'home' })
                } else {
                    next()
                }
            }
        },
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!