2024/12/07 3

Vue로 PWA 개발, 프론트엔드 공부 my-pwa-app의 자동 로그인과 상태 관리

Vue로 PWA 개발 - 그랜파 개발자. 로그아웃하지 않은 상태에서 my-pwa-app를 종료하였다면 다음에 접속할 때는 자동으로 로그인하도록 합니다.그리고 로그인 상태에 따라 메뉴 항목이 다르게 보이도록 만들어 봅시다.1. 로그인 전2. 로그인 후3. 자동 로그인로그인 인증 상태에 따른 자동 로그인 기능 구현을 위하여 onAuthStateChanged를 사용합니다.onAuthStateChanged는 Firebase Authentication에서 제공하는 메서드로, 사용자의 인증 상태 변화를 실시간으로 감지하는 역할을 합니다. 사용자가 로그인하거나 로그아웃할 때, 또는 앱이 처음 로드될 때 트리거됩니다.이 메서드는 애플리케이션의 인증 상태를 지속적으로 모니터링하는 데 유용합니다.src/main.js// ..

Vue로 PWA 개발, 프론트엔드 공부 my-pwa-app의 로그인

Vue로 PWA 개발 - 그랜파 개발자. 딸랑 이메일과 비밀번호로 구글 계정을 만들고는 회원 가입을 만들었다고 하네요.. ㅎㅎㅎ회원 정보 관련해서 추후에 뭔가를 추가하도록 하지요 지금은 로그인, 로그아웃, 자동 로그인, 로그인 상태 확인 등을 만들고 이해해 봅시다.이메일과 비밀번호를 입력하면 로그인이 될 것이고, 로그아웃하지 않은 상태에서 my-pwa-app를 종료하였다면 다음에 접속할 때는 자동으로 로그인하도록 합니다. 로그인하면 로그아웃 아이콘을 나타내어 로그아웃을 할 수 있도록 합니다.1. 로그인, 로그아웃먼저 로그인과 로그아웃을 만들어 봅시다. 2. Login - signInWithEmailAndPassword로그인은 signInWithEmailAndPassword를 사용합니다.signInWith..