로그인-로그아웃(JS)

SPA에서 자바스크립트를 통해, 로그인시 로그아웃 버튼을 뜨게하고 로그아웃시 로그인 버튼을 뜨도록 만드는 것이 오늘 목표
지금 생각하는 구상은

구상

• Email, password를 submit받음

• 유효성 검사 후 로그인 성공시 화면에 로그인, 로그아웃 버튼을 각각 hide, show처리
  document.getElementById("로그인 버튼").style.display = "none";
  document.getElementById("로그아웃 버튼").style.display = "block";

• 로그아웃 버튼 클릭 후 화면에 로그아웃, 로그인 버튼을 각각 hide, show처리
  document.getElementById("로그아웃 버튼").style.display = "none";
  document.getElementById("로그인 버튼").style.display = "block";

코드확인

html

html

		<div id="logoutBtn">
            <form onsubmit="handleAuth(event)">
                <div class="authInput">
                    <div>EMAIL:</div>
                    <input id="email" type="text" />
                </div>
                <div class="authInput">
                    <div>PW:</div>
                    <input id="pw" type="password" />
                </div>
                <section id="authBtnSection">
                    <input type="submit" id="authBtn" value="로그인" />
                    <p id="authToggle" onclick="onToggle()">회원가입 화면으로</p>
                </section>
            </form>
        </div>  
        <div id="loginBtn">
            <button onclick="goToProfile()">프로필 관리</button>
            <button onclick="logout()">로그아웃</button>
        </div>

JS

js

export const handleAuth = (event) => {
  event.preventDefault();
  const email = document.getElementById("email");
  const emailVal = email.value;
  const pw = document.getElementById("pw");
  const pwVal = pw.value;

  // 유효성 검사 진행
  if (!emailVal) {
    alert("이메일을 입력해 주세요");
    email.focus();
    return;
  }
  if (!pwVal) {
    alert("비밀번호를 입력해 주세요");
    pw.focus();
    return;
  }

  const matchedEmail = emailVal.match(emailRegex);
  const matchedPw = pwVal.match(pwRegex);

  if (matchedEmail === null) {
    alert("이메일 형식에 맞게 입력해 주세요");
    email.focus();
    return;
  }
  if (matchedPw === null) {
    alert("비밀번호는 8자리 이상 영문자, 숫자, 특수문자 조합이어야 합니다.");
    pw.focus();
    return;
  }

  const authBtnText = document.querySelector("#authBtn").value;
  if (authBtnText === "로그인") {
    // 유효성 검사 후 로그인 성공 시 뉴스피드 화면으로
    signInWithEmailAndPassword(authService, emailVal, pwVal)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        window.location.hash = "#newsfeed";
        document.getElementById("logoutBtn").style.display = "none";
        document.getElementById("loginBtn").style.display = "block";
      })
      .catch((error) => {
        const errorMessage = error.message;
        console.log("errorMessage:", errorMessage);
        if (errorMessage.includes("user-not-found")) {
          alert("가입되지 않은 회원입니다.");
          return;
        } else if (errorMessage.includes("wrong-password")) {
          alert("비밀번호가 잘못 되었습니다.");
        }
      });
  } else {
    // 회원가입 버튼 클릭의 경우
    createUserWithEmailAndPassword(authService, emailVal, pwVal)
      .then((userCredential) => {
        // Signed in
        console.log("회원가입 성공!");
        // const user = userCredential.user;
      })
      .catch((error) => {
        const errorMessage = error.message;
        console.log("errorMessage:", errorMessage);
        if (errorMessage.includes("email-already-in-use")) {
          alert("이미 가입된 이메일입니다.");
        }
      });
  }
};

export const logout = () => {
  signOut(authService)
    .then(() => {
      // Sign-out successful.
      localStorage.clear();
      console.log("로그아웃 성공");
      document.getElementById("loginBtn").style.display = "none";
      document.getElementById("logoutBtn").style.display = "block";
    })
    .catch((error) => {
      // An error happened.
      console.log("error:", error);
    });
};

결과

일단 결론부터 말하면 오류발생...

결과 확인

로그인시, 이렇게

둘 다 뜨는 것을 확인할 수 있고, 저기서 로그인을 한번 더 해주면,

원하는 결과 값이 나옴
로그아웃도 마찬가지로,

한번 더 클릭해주면,

원하는 결과 값이 나옴

코드 순서에 문제가 있나 싶어서 none, block을 여기저기 넣어봤지만 결과는 같거나 더 안좋은 방향으로 나타남

---

이 반쪽짜리 결과물을 어떻게 해결해야 좋을지 막막하지만 좀 더 연구해서 꼭 원하는 완벽한 출력이 나왔으면 좋겠다...
오늘 소득은 SPA에서도 display 기능을 이용해 추가적인 html의 화면전환 없이 효율적으로 페이지를 운영 가능하다는 것을 알았다는 점 (물론 오류 먼저 해결해야 입증)