인증 상태에 따라 프런트엔드 변경

내 에서 우리는 백엔드에 대해 Firebase를 통한 기본 인증 설정을 살펴보았습니다. 이제 해당 정보를 사용하여 사용자의 인증 상태에 따라 프런트엔드에 표시되는 내용을 변경해 보겠습니다.

이를 매우 간단하게 유지하기 위해 이전에 생성한 Login , Sign Up 및 Logout 에 대한 버튼을 표시하는 방법과 시기에만 집중하겠습니다.

우리가 중단한 방식으로 세 개의 버튼은 모두 웹 페이지에 항상 표시되지만 로그인하지 않은 사용자가 Logout 버튼을 보는 것은 말이 되지 않습니다. 로그인한 사용자가 Login 및 Sign Up 버튼을 계속 볼 수 있도록 합니다.

여기에서 우리를 돕기 위해 간단한 HTML 클래스 이름을 사용하여 시작하겠습니다. 우리가 할 수 있는 일은 사용자가 로그아웃할 때 표시하려는 버튼 요소에 대해 클래스 이름 "logged-out"을 추가하고 사용자가 로그인할 때 표시하려는 요소에 대해 클래스 이름 "logged-in"을 추가하는 것입니다. 기본적으로 "display: none;"으로 설정된 인라인 스타일 속성을 추가합니다. index.html 파일의 양식은 다음과 같아야 합니다.

<form>
  <input type="email" id="email" />
  <label for="email">Email</label>
  <br>
  <input type="password" id="password" />
  <label for="password">Password</label>
  <br>
  // Below is where we'll add the class names and inline default styling
  <button class="logged-out" style="display: none;" id="signup-btn">Sign Up</button>
  <button class="logged-out" style="display: none;" id="login-btn">Login</button>
  <button class="logged-in" style="display: none;" id="logout-btn">Logout</button>
</form>

이제 main.js Firebase 메서드를 호출하여 사용자의 인증 상태를 확인하는 onAuthStateChanged 파일로 이동해 보겠습니다. 이 함수는 user 의 콜백을 반환하므로 user 이 존재하는지 여부를 확인하는 조건문을 추가해 보겠습니다.

먼저 버튼 요소를 쿼리하고 클래스가 "logged-out"인 항목을 const loggedOutBtns에 저장합니다(지금은 하나만 있지만 로그아웃한 사용자에게 원하는 다른 버튼이나 링크를 추가하기로 결정한 경우 이 방법이 유용할 수 있습니다. ), 클래스가 "logged-in" 인 것은 const loggedInBtns 입니다.

const loggedOutBtns = document.querySelectorAll('.logged-out');
const loggedInBtns = document.querySelectorAll('.logged-in');

이제 onAuthStateChanged 함수 내부에 user 이 있으면 버튼 요소를 반복하고 각 요소에 대해 인라인 스타일 표시를 표시하려는 요소에 대해 block으로 변경하고 원하는 항목에 대해 none으로 변경합니다. 숨김 상태로 유지합니다(기본적으로 none으로 설정됨). user 이 없으면 그 반대입니다.

auth.onAuthStateChanged(user => {
  if (user) {
    loggedInBtns.forEach(link => link.style.display = 'block');
    loggedOutBtns.forEach(link => link.style.display = 'none');

    // We can add more functions here to display the data that can be made available to a logged in user

  } else {
    loggedInBtns.forEach(link => link.style.display = 'none');
    loggedOutBtns.forEach(link => link.style.display = 'block');
  }
});

데이터 보안

이 게시물이 프런트엔드 변경에 관한 것임을 알고 있지만, 이 시점에서 우리 앱이 안전하지 않다는 점에 유의하는 것이 중요합니다. 즉, 누군가 여전히 브라우저 검사기를 통해 HTML을 조작하여 로그인하고 숨겨야 하는 데이터에 액세스할 수 있습니다 권한이 없는 사용자로부터. 사용자만 데이터를 읽고 쓸 수 있도록 하려면 Firebase 콘솔을 통해 보안 규칙을 업데이트해야 합니다.

Firebase Console(사용 중인 Firebase 데이터베이스 도구)의 '규칙' 탭 아래에 한 줄을 추가하고 uid이 아닌 null(고유 ID)을 가진 사용자를 허용하는 줄을 추가해야 합니다. 데이터를 읽고 쓸 수 있도록 합니다.



변경이 완료되면 이제 "게시"를 클릭하면 됩니다. d( ^.^ )b

유용한 링크

🔥 🔥
여기에 다시 연결해 보겠습니다. The Net Ninja는 따라하기 쉬운 설명과 함께 개념을 한 번에 짧은 동영상으로 분해하는 데 탁월합니다. 나는 그것을 확인하는 것이 좋습니다!

Firebase Authentication Documentation