저는 Vue를 처음 접했고 Pinia를 처음 사용했습니다. 저는 이 가이드에 따라 Firebase, Pinia 및 Axios를 설정했습니다. 제가 만들고 있는 앱은 FirebaseUI를 사용하여 사용자가 이메일 링크를 통해 로그인할 수 있게 해줍니다. 모든 작업은 아래 LoginPage 구성 요소에서 이루어집니다.

(잘못된 유형의 변수/함수는 무시하세요. 처음부터 작동하길 바랄 뿐입니다)

으아악

사용자가 성공적으로 로그인하면 애플리케이션은 signInSuccessWithAuthResult 함수의 AuthResult 반환 개체를 사용하여 Pinia 스토어 사용자 개체를 업데이트합니다. 디버거를 사용하면 저장된 개체가 다음과 같은 모습을 볼 수 있습니다.

저장 accessToken. 사용자 저장공간은 다음과 같습니다:

으아악

애플리케이션에서 애플리케이션의 Axios 요청에 accessToken를 추가하는 Axios 인터셉터를 설정했습니다.

으아악

이 시점에서 사용자 저장소에서 accessToken 를 검색하려고 하면 사라졌습니다. 전부는 아니더라도 사용자 개체의 다른 속성 중 대부분은 여전히 ​​존재하지만 액세스 토큰은 없으므로 저장소를 올바르게 사용하고 있다고 확신합니다.

내가 어디에서 잘못되고 있고 왜 accessToken이 매장에서 제거되었는지 설명해 주실 수 있나요? 제가 보기에는 피니아 스토어를 올바르게 사용하고 있는 것 같고, 인터셉터도 정확하다고 확신합니다. 그러나 액세스 토큰을 잘못된 방식으로 저장하고 있을 수도 있습니다. Vue로 Firebase 인증을 올바르게 설정하는 방법에 대한 도움/조언을 제공해 주시면 매우 감사하겠습니다.

인터셉터 내에서 디버깅할 때 사용자가 저장한 값을 포함하도록 편집되었습니다.