programing

루트 변경 없이 Nuxt.js 미들웨어 재평가

copyandpastes 2022. 8. 3. 23:36
반응형

루트 변경 없이 Nuxt.js 미들웨어 재평가

현재의 루트를 실제로 변경하지 않고 미들웨어의 상태를 근본적으로 「재평가」할 수 있는지 궁금합니다.

미들웨어의 목적은 로그인하지 않은 사용자가 "대시보드"에 액세스하지 못하도록 하는 것입니다.문제는 사용자가 경로를 변경하지 않고 로그인하거나 로그아웃할 수 있지만 페이지를 변경할 때까지 리디렉션되지 않는다는 것입니다.

사용자의 인증 상태가 변경되었을 때 트리거되는 VueX 액션이 있는데, 이 액션은 (내가 볼 수 있는 바로는) 리다이렉트 변수나 루트 변수에 액세스할 수 없습니다.

// /mixins/auth.js
const reevaluateAuthStatus = (store, redirect, route) => {
  console.log(route)
  const redirectPolicy = route.meta.map((meta) => {
    if (meta.auth && typeof meta.auth.redirectPolicy !== 'undefined') { return meta.auth.redirectPolicy[0] }
    return []
  })

  const user = store.getters['auth/getUser']
  if (redirectPolicy.includes('LOGGEDOUT')) {
    if (user) {
      return redirect('/dashboard')
    }
  } else if (redirectPolicy.includes('LOGGEDIN')) {
    if (!user) {
      return redirect('/login')
    }
  }
}

module.exports = {
  reevaluateAuthStatus
}

// /middleware/auth.js
import { reevaluateAuthStatus } from '../mixins/auth'

export default function ({ store, redirect, route }) {
  reevaluateAuthStatus(store, redirect, route)
}

이 문제에 대한 도움에 감사드립니다:)

미들웨어 AFIK는 주로 이것(설명서에 기재되어 있는 바와 같이)이기 때문에 재평가할 수 없습니다.

추가 경로로 이동할 때 클라이언트 측에서 미들웨어를 [...]라고 부릅니다.

이 IMO를 달성할 수 있는 2가지 클린 방법:

  • socket.io 또는 Apollo Subscriptions와 같은 웹소켓을 사용하여 UI가 새로운 변경 사항을 고려하도록 합니다.
  • 미들웨어 로직을 콜 종류로 내보냅니다.이러한 로직은 Nuxt에서 후크 또는 기타 데이터 관련 가져오기 후크를 다시 호출하여 트리거할 수 있습니다.

더 보기 흉한 솔루션은 다음과 같습니다.

  • 내부 생성 및 실제 상태가 여전히 유효한지 여부를 5초 정도마다 확인합니다.
  • 같은 것을 실제로 사용하고 있는 페이지로 이동한다.this.$router.go(0)Vue 라우터 매뉴얼에서 설명했듯이

그러나 대부분의 경우 사용자가 로그아웃되어도 큰 문제가 되지 않을 수 있습니다.왜냐하면 사용자가 뭔가를 시도하면 바로 리다이렉트되기 때문입니다.
사용자가 로그인 했을 때 SPA에서 프로액티브한 행동을 하지 않으면 어떤 경우에 이 문제가 발생할 수 있는지조차 알 수 없습니다.

언급URL : https://stackoverflow.com/questions/69910304/reevaluate-nuxt-js-middleware-without-a-route-change

반응형