Programing

대상 리디렉션이 동일한 경로로 확인되면 각 라우터가 호출되지 않음

c10106 2022. 5. 18. 21:32
반응형

대상 리디렉션이 동일한 경로로 확인되면 각 라우터가 호출되지 않음

사용할 때 문제가 있음router.push('/')로그아웃의 마지막 단계로

다음 경로에서 로그아웃 절차를 트리거하는 경우/ redirect~에게router.beforeEach트리거되지 않으므로 사용자를 로 리디렉션하지 않음/login그러나 로그인한 사용자만 볼 수 있어야 하는 경로(로그아웃 절차 종료 시 사용자가 더 이상 표시되지 않음)를 표시한다.

{
  path: '/',
  redirect: 'foo'
},
{
  path: '/foo',
  name: 'foo',
  component: Foo,
  meta: {
    requiresAuth: true
  }
},

그리고

router.beforeEach((to, from, next) => {
  ...
  if(to.requiresAuth && userLoggedIn == false) 
    next('/login')
  ...

다른 경로에서 로그아웃을 트리거하는 경우/foo예상대로 작동하지만 만약 내가 그것을 촉발시킨다면/foo사용자가 다음으로 리디렉션되지 않음/login.

나는 그것이 가능한 한 라우팅을 효율적으로 만들기 위한 의도된 행동일 수 있다고 추측하지만, 이 경우 그것은 확실히 내가 원하는 것이 아니다.

어떻게 보장할 수 있는가?beforeEach모든 경로에 대해 경로 경비원이 평가될 것이다.router.push/replace?

router.beforeEach내비게이션의 변화를 감지할 때만 가드가 달리는 것 같다.당신의 경우 경로가 같기 때문에, 당신은 당신이 의도한 경로보다 먼저 다른 경로 경로를 밀어 항법 변경을 강요해야 할 것이다.빈 공간을 미리 밀면 효과가 좋다.이것은 명백히 진부한 짓이다.

예를 들면 다음과 같다.

<button @click="$router.push(' '); $router.push('/')">Logout</button>

데모를 하다

만들기/logout로 리디렉션되는 경로/노선으로 가다

보너스: "로그아웃 성공"으로 멋진 메시지를 표시하고 몇 초 후에 리디렉션하십시오.

참조URL: https://stackoverflow.com/questions/52686783/vue-router-beforeeach-not-called-if-destination-redirect-resolves-to-same-path

반응형