如何实现授权后切换图标？注册前后图标切换需求咨询

Got it, let's sort out how to show the right auth block depending on whether the user is registered or not. Here's a straightforward, maintainable approach:

Step 1: Complete Your HTML Structure #

First, make sure both blocks are in your markup, with the registered user block hidden by default. I'll fill in the missing bits from your code snippet:

<!-- Auth icon for unregistered users -->
<div class="auth_icon" id="authIconBlock">
  <a href="#popup-auth" class="js-popup-open">
    <img src="./public/images/icons/enter.svg" height="35px" width="35px" alt="authorization_icon" title="authorization">
  </a>
</div>

<!-- Block for registered users (initially hidden) -->
<div class="icForRegistrUsers" id="registeredUserBlock" class="hidden">
  <!-- Add your registered user content here (profile icon, logout button, etc.) -->
  <img src="./public/images/icons/user-profile.svg" height="35px" width="35px" alt="user_profile" title="Your profile">
  <button class="js-logout-btn">Logout</button>
</div>

Step 2: Add CSS for Toggle Control #

Use a reusable hidden class to manage visibility cleanly (better than inline styles):

/* Utility class to hide elements */
.hidden {
  display: none !important;
}

Step 3: JavaScript Logic to Handle State #

We'll handle three key scenarios: page load, successful registration, and logout. I'll use localStorage to persist the login state (adjust this if you're using backend sessions):

// Check user state when the page loads
document.addEventListener('DOMContentLoaded', () => {
  // Check if user is logged in (from localStorage)
  const isRegistered = localStorage.getItem('isRegistered') === 'true';
  toggleAuthBlocks(isRegistered);
});

// Core function to switch between blocks
function toggleAuthBlocks(isUserRegistered) {
  const authIcon = document.getElementById('authIconBlock');
  const registeredBlock = document.getElementById('registeredUserBlock');
  
  // Toggle the hidden class based on registration status
  authIcon.classList.toggle('hidden', isUserRegistered);
  registeredBlock.classList.toggle('hidden', !isUserRegistered);
}

// Call this after successful registration
function onRegistrationSuccess() {
  // Save the logged-in state
  localStorage.setItem('isRegistered', 'true');
  // Switch to the registered user block
  toggleAuthBlocks(true);
}

// Call this when user logs out
function onLogout() {
  // Remove the logged-in state
  localStorage.removeItem('isRegistered');
  // Switch back to the auth icon block
  toggleAuthBlocks(false);
  // Optional: Redirect to home/login page
  // window.location.href = '/login';
}

// Bind logout button click event
document.querySelector('.js-logout-btn')?.addEventListener('click', onLogout);

Key Notes #

• If you're using a backend, replace the localStorage check with an API call on page load to fetch the actual user session status.
• The toggleAuthBlocks function is reusable—you can call it anywhere you need to update the UI (like after login, registration, or logout).
• Adjust the display property in the .hidden class if you're using flex/grid for your blocks (just change display: none to whatever fits your layout).

内容的提问来源于stack exchange，提问作者user_211200