Dziwny błąd konsoli, gdy akcja vuex zwraca fałsz

Cześć,

Staram się stworzyć niestandardowego strażnika nawigacyjnego w vue, używając akcji vuex.

Kod ochrony routera wygląda następująco:

Router.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('/')
        }
      }
    }

Tak wygląda kod z pliku 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
    }
  }

Kod działa idealnie, ale gdy akcja pingAuth zwraca false, pojawia się dziwny błąd konsoli, użytkownik jest przekierowywany poprawnie, nawet gdy pojawia się błąd.

Jeśli pingAuth zwraca true, w konsoli nie ma błędu. Błąd jest inny w przeglądarce Firefox i Chrome.

Błąd Firefoksa

Błąd Chrome

Próbowałem odtworzyć problem w skrzynce z kodami, ale błąd się nie pojawia. Próbowałem również kodu z nowym projektem clean vue (wszystkie zależności od najnowszych wersji) i mam ten sam błąd.

Czy ktoś może wyjaśnić, dlaczego otrzymuję ten błąd?

Z góry dziękuję.

@ vue / cli 4.0.5 na 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"
  }

Edytuj:

Próbowałem wyodrębnić problem. Problem pochodzi z nawigacji routera.

Utworzyłem repozytorium dla mojego problemu.

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

yarn install

yarn serve

Inną interesującą rzeczą jest to, że jeśli używam łącza routera do nawigacji, nie ma błędu.

Znalazłem poprawkę dla tego błędu.

Jeśli użyję @click="$router.push({ path: '/protected' }).catch((err) => {})" zamiast @click="$router.push({ path: '/protected' })", nie ma błędu.