当 vuex 操作返回 false 时出现奇怪的控制台错误答案

【问题标题】：Weird console error when vuex action return false当 vuex 操作返回 false 时出现奇怪的控制台错误
【发布时间】：2020-03-10 15:19:20
【问题描述】：

你好，

我尝试使用 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的错误是不同的。

Firefox 错误

Chrome 错误

我已尝试在代码沙盒中重现该问题，但该错误未出现。我还用一个新的干净 vue 项目（所有依赖项到最新版本）尝试了代码并且有同样的错误。

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

非常感谢。

@vue/cli 4.0.5 在 ubuntu 19 上

package.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' })"，则不会出现错误。

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

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

【讨论】：