이제 회원가입 된 유저를 로그인 진행을 한 후 홈페이지로 이동하게 만들어줄거임
로그인도 가입하기와 동일하게
로그인 중일때는 버튼을 클릭하지 못하도록 한다.
<button v-if="loading" class="w-96 rounded bg-light text-white py-4">
로그인 중입니다.
</button>
<button
v-else
@click="onLogin"
class="w-96 rounded bg-primary text-white py-4 hover:bg-dark"
>
로그인
</button>
1. auth와 signInWithEmailAndPassword 를 import하여 사용할거임
로그인 버튼을 클릭하면 로그인 함수가 실행되며
일단 각 input 태그에 공백이 있는지 검사한다. 만약에 있으면 alert 으로 에러메세지를 출력하며 리턴
2.에러가 있을 경우 try catch문을 사용하여 막아준다.
일단 loading이 시작되며 현재 input에 입력되어있는 email과 password정보를 firebase에서 인증기능을 통해
사용자가 있는지 검사를 하고 있으면 router를 통해서 기본 페이지로 이동한다.
<script>
import { ref } from "vue";
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../firebase";
import { useRouter } from "vue-router";
export default {
setup() {
// 변수 ref(초기값) usestate 와 동일
const email = ref("");
const password = ref("");
const loading = ref(false);
const router = useRouter();
//회원가입 클릭 시 실행되는 함수
const onLogin = async () => {
if (!email.value || !password.value) {
alert("이메일, 비밀번호를 모두 확인해 주세요.");
return;
}
try {
loading.value = true;
const { user } = await signInWithEmailAndPassword(
auth,
email.value,
password.value
);
console.log(user.uid);
router.replace("/"); //뒤로가기 클릭하면 로그인 페이지로 이동못하게함
} catch (e) {
switch (e.code) {
case "auth/invalid-email":
alert("잘못된 이메일 형식입니다");
break;
case "auth/wrong-password":
alert("비밀번호가 틀립니다.");
break;
case "auth/user-not-found":
alert("등록되지 않은 이메일입니다.");
break;
default:
alert(e.message);
break;
}
} finally {
loading.value = false;
}
};
return {
email,
password,
loading,
onLogin,
};
},
};
</script>
만약에 에러가 있을 경우
switch문을 활용하여 에러코드에 맞게 출력되는 에러 형식을을 바꿔준다.
https://firebase.google.com/docs/auth/admin/errors?hl=ko
Admin Authentication API 오류 | Firebase
의견 보내기 Admin Authentication API 오류 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 다음은 Firebase Admin Node.js Authentication API에서 발생하는 오류 코드와 설명,
firebase.google.com
라우터를 이용하여 정상적으로 로그인되면
기본 페이지로 이동하게 하는데
뒤로가기를 누르면 login페이지로 이동하면 곤란하니까
회원가입 페이지와 다르게
push => replace를 사용한다.
router.replace("/"); //뒤로가기 클릭하면 로그인 페이지로 이동못하게함
정상적으로 로그인되면 콘솔에 uid가 출력됨을 확인한다.
resgiter(회원가입) 페이지도 예외처리를 위해 수정해준다.
//회원가입 클릭 시 실행되는 함수
const onRegister = async () => {
if (!username.value || !email.value || !password.value) {
alert("유저네임, 이메일, 비밀번호를 모두 확인해 주세요.");
return;
}
} catch (e) {
switch (e.code) {
case "auth/invalid-email":
alert("잘못된 이메일 형식입니다");
break;
case "auth/week-password":
alert("비밀번호가 너무 쉬워요");
break;
case "auth/email-already-in-use":
alert("이미 가입되어 있는 이메일입니다.");
break;
default:
alert("회원가입 실패");
break;
}
} finally {
loading.value = false; //로딩 종료
}
};
