vuex 작업이 false를 반환할 때 이상한 콘솔 오류 발생

vuex 작업이 false를 반환할 때 이상한 콘솔 오류 발생

안녕하세요.

vuex 작업을 사용하여 vue를 사용하여 사용자 지정 탐색 가드를 만들려고 합니다.

라우터 가드의 코드는 다음과 같습니다.

router.displaces

    {
      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 return true의 경우 콘솔에 오류가 없습니다.파이어폭스와 크롬에서는 에러가 다르다.

파이어폭스 오류

크롬 오류

코드 앤 박스에 문제를 재현하려고 했지만 에러가 발생하지 않습니다.새로운 클린 vue 프로젝트(모든 것은 최신 버전에 의존)로 코드를 시험해 본 결과, 같은 에러가 발생했습니다.

누가 내가 왜 이 오류를 발생하는지 설명해 줄 수 있나요?

잘 부탁드립니다.

@vue/cli 4.0.5 (ubuntu 19 상)

패키지.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"
  }

편집:

나는 그 문제를 분리하려고 했다.문제는 라우터의 내비게이션에서 발생했습니다.

나는 내 문제에 대한 보고서를 작성했다.

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' })"에러는 없습니다.

확인 부탁드립니다.'로그인' 페이지를 방문하여 동일한 페이지의 다음('로그인')을 사용합니다.따라서 같은 페이지인지 아닌지를 판단해야 합니다.같은 페이지일 경우 next()를 사용합니다.

언급URL : https://stackoverflow.com/questions/58860618/weird-console-error-when-vuex-action-return-false