javascript - vuex 操作返回 false 时出现奇怪的控制台错误

Question

你好，

我尝试使用 vuex 操作使用 vue 制作自定义导航守卫。

路由器防护的代码如下所示:

路由器.js

    {
      path: '/authusersonly',
      name: 'authusersonly',
      component: loadView('authusersonly'),
      async beforeEnter (to, from, next) {
        try {
          let authStatus = await store.dispatch('pingAuth', 'checkAuth')
          if (authStatus) next()
          else next('/login')
        } catch (error) {
          console.log(error)
          next('/')
        }
      }
    }

store.js 文件中的代码如下所示

actions: {
    async pingAuth ({ commit, state, getters, dispatch }, action) {
      let pingStatus = getters.pingStatus
      if (!pingStatus) {
         // here i do the user check using axios with await axios.......        
      }
      // here i return the results true or false
      return false
    }
  }

代码工作正常，但是当 pingAuth 操作返回 false 时，我收到奇怪的控制台错误，即使出现错误，用户也会正确重定向。

如果 pingAuth 返回 true，则控制台中不存在错误。
firefox 和 chrome 中的错误是不同的。

火狐错误


Chrome 错误


我试图在代码和框中重现该问题，但错误并不明显。我还尝试了一个新的干净的 vue 项目(所有依赖于最新版本)的代码并且有同样的错误。

谁能解释为什么我收到这个错误？

非常感谢。

ubuntu 19 上的 @vue/cli 4.0.5

包.js

  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "date-fns": "1.29.0",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-i18n": "^8.14.1",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-plugin-pwa": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vueth": "file:../plugin/",
    "vue-template-compiler": "^2.6.10"
  }

编辑:

我试图隔离问题。
问题来自路由器导航。

我为我的问题创建了一个 repo。

git clone https://github.com/thenutz/vue-router-error.git

yarn install

yarn serve

另一个有趣的事情是，如果我使用路由器链接进行导航，则不会出现错误。

我找到了解决此错误的方法。

如果我使用 @click="$router.push({ path: '/protected' }).catch((err) => {})"而不是 @click="$router.push({ path: '/protected' })"不存在错误。

Answer 1

请检查是否是这种情况。您正在访问“登录”页面并使用 next('login') 到同一页面。所以需要判断是否是同一个页面，如果是就用'next()'。