解决导航守卫引发的错误:'从'/'重定向到'/dashboard'时出现的错误”
P粉143640496
P粉143640496 2024-02-21 12:18:23
0
1
395

当我使用用户登录时,它会按预期将我重定向到仪表板。一旦我注销并尝试再次登录(即使使用另一个用户,并且不刷新页面),它就会在控制台中返回此错误:

如果经过身份验证,我只想在仪表板中重定向用户,即使页面未刷新,因为我确实注意到,如果刷新页面,我可以毫无问题地登录。

如果可以的话请帮助我。下面是一些代码:

登录方式

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学习者快速成长!