Vue의 BeforeEach 가드 경로에서 ASync/Await가 예상대로 작동하지 않습니까?

Question

이것은 내 경로 가드입니다:

으아아아

문제는 디스패치 메서드에서 Wait를 사용했지만 처음에 비어 있던 권한의 상태 값을 가져오지 못했다는 것입니다 vuex 매장 코드는 다음과 같습니다.

으아아아

이 문제를 해결하도록 도와주세요. 감사합니다!

Answer 1

Vuex에서는 작업이 비동기식입니다. 호출 함수(작업 개시자)에게 작업이 완료되었음을 알리는 유일한 방법은 Promise를 반환하고 나중에 해결하는 것입니다.

예는 다음과 같습니다. myAction은 Promise를 반환하고 http 호출을 한 후 나중에 Promise를 비동기식으로 해결하거나 거부합니다.

으아악

}

이제 Vue 구성 요소가 myAction을 시작하면 이 Promise 개체를 가져오고 성공 여부를 알 수 있습니다. 다음은 Vue 구성 요소에 대한 몇 가지 샘플 코드입니다.

으아악

}

또한 권한이 일치하지 않는 경우 동일한 경로를 호출하면 동일한 경로를 계속 호출하여 무한 루프가 생성됩니다. 권한이 거부된 경우 액세스 거부 페이지로 리디렉션됩니다.