반응형
루트 변경 없이 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
반응형
'programing' 카테고리의 다른 글
동일한 키 아래에 여러 값이 있는 HashMap (0) | 2022.08.03 |
---|---|
다른 컴포넌트에서 데이터 접근 (0) | 2022.08.03 |
파이프를 사용하여 두 프로그램 간에 간단한 문자열을 보내는 방법은 무엇입니까? (0) | 2022.08.03 |
Element-UI : 컴포넌트 간 폰트 패밀리 차이 (0) | 2022.08.03 |
vuex의 여러 모듈에 대한 올바른 구문 (0) | 2022.08.03 |