Vue 라우터 Auth-guard 함수가 Vuex 스토어 상태를 확인하지 않음

Vue 라우터 Auth-guard 함수가 Vuex 스토어 상태를 확인하지 않음

프로파일 페이지의 auth-guard를 설정하려고 합니다.Vue(2.0)를 vue-router와 함께 사용하고 Vuex를 스테이트로 사용하고 있습니다.내 백엔드는 파이어베이스인데 그게 중요한 건 아닌 것 같은데?auth-guard 함수가 요구 사항을 올바르게 가져올 수 없는 것 같습니다.인증 상태

이것은 내 auth-guard 기능입니다.

  {
path: "/profile",
name: "Profile",
component: Profile,
meta: {
  requiresAuth: true
}


}
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {  
  console.log('-----------ROUTE GUARD PROPS--------');
  console.log(store.state.user.isAuthorized);
  console.log(store.state.user);
  console.log('----------- END ROUTE GUARD PROPS--------');
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (store.state.user.isAuthorized) {
      next()
    } else {
      next("/Login")
    }
  } else {
      next()
  }
})

페이지 변경 시 브라우저 콘솔에 표시되는 결과는 다음과 같습니다.

여기서의 쟁점은, 분명히, 왜,console.log모순되다isAuthorized의 인쇄물에서user모듈state참고로 저희 가게에는user그리고.shared모듈.그user모듈에는state2명의 멤버로 구성되어 있습니다.user그리고.isAuthorized브라우저 출력입니다.

이 둘이 왜 충돌하는지 아십니까?

이는 콘솔에서 개체를 확장할 때 개체와 개체 값이 로깅 시간이 아닌 확장 시간에 따라 평가되기 때문입니다.작은 파란색 정사각형을 마우스로 가리키면 값이 언제 평가되었는지 알 수 있습니다.!그 안에 있어요.

그 말은, 당신이 오브젝트를 기록할 때. isAuthorized정말이다false속성을 직접 로그에 기록했을 때 알 수 있듯이 콘솔에서 개체를 확장하면 다음과 같이 됩니다.true로그 기록 후 어느 시점에서 프로그램의 일부가 "is Authorized"로 변경되었기 때문입니다.true.

또한 값이 기록될 때 콘솔이 열려 있는지 여부도 약간 다릅니다.이하의 스크린샷은, 이 투고 마지막에 있는 스니펫을 기본으로 하고 있기 때문에, 직접 사용해 보세요.

첫 번째 이미지는 로깅 시 콘솔이 닫혀 있는 경우의 이미지입니다.여기서 간단히 알 수 있습니다.Object확장하면state이true.

두 번째 그림에서는 로그 기록 시 콘솔이 열려 있습니다.여기서state: false확장하면state: true오브젝트의 현재 상태를 가져오고 있기 때문입니다.

const object = {
  state: false
}

console.log('State:', object.state)
console.log('Object:', object)

object.state = true

Open up your browsers console to see the output.

언급URL : https://stackoverflow.com/questions/65878659/vue-router-auth-guard-function-doesnt-check-vuex-store-state