Вход работает, но значок профиля не обновляется после перенаправления [закрыто] ⇐ Javascript

[Anonymous]

Я создаю готовый к производству веб-сайт электронной коммерции < /strong> с отдельными потоками для клиентов, администраторов и партнеров по доставке.

Я имею печенье jwt только для HTTP < /strong> для аутентификации. < /p>
Проблема: < /p>

[*] /pist nastic>
/plain /plain /plain /pister work>
/pist work>
. />
[*] После успешного входа я перенаправляю пользователя на index.html .

[*] on index.html , кнопки для регистрации и регистрации должны быть заменены значком профиля, если пользователь входит в систему. /> Но значок профиля не появляется < /strong>, и щелчок в логин снова запускает цикл.

Код: Выделить всё

const BASE_URL = "https://example.com/api"; // Backend deployed
document.addEventListener("DOMContentLoaded", () => {
checkLoginStatus();
});

async function loginUser(email, password) {
try {
const res = await fetch(`${BASE_URL}/auth/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
credentials: "include" // for cookies
});

const data = await res.json();
if (res.ok) {
alert("Login successful");
window.location.href = "index.html";
} else {
alert(data.message || "Login failed");
}
} catch (error) {
console.error("Error:", error);
}
}

async function checkLoginStatus() {
try {
const res = await fetch(`${BASE_URL}/auth/me`, {
method: "GET",
credentials: "include"
});
const data = await res.json();

const loginBtn = document.getElementById("login-btn");
const signupBtn = document.getElementById("signup-btn");
const profileIcon = document.getElementById("profile-icon");

if (res.ok) {
// Hide login/signup, show profile icon
if (loginBtn) loginBtn.style.display = "none";
if (signupBtn) signupBtn.style.display = "none";
if (profileIcon) profileIcon.style.display = "block";
} else {
if (loginBtn) loginBtn.style.display = "block";
if (signupBtn) signupBtn.style.display = "block";
if (profileIcon) profileIcon.style.display = "none";
}
} catch (error) {
console.error("Error checking login status:", error);
}
}
< /code>

 бэкэнд -маршруты (node.js + Express): < /strong> < /p>
router.post("/login", async (req, res) => {
// Verify credentials
// Generate JWT and send as HTTP-only cookie
res.cookie("token", token, {
httpOnly: true,
secure: true,
sameSite: "None"
});
res.status(200).json({ message: "Login successful" });
});

router.get("/me", authMiddleware, (req, res) => {
res.status(200).json({ user: req.user });
});
< /code>

 Что я пробовал: < /strong> < /p>

  Проверить, что куки отправляются и хранятся в браузере после входа.checkLoginStatus()

вызывает на domcontentloaded in index.html .

backend/me route работает правильно в почторе и возвращает пользовательский объект. Запросы. index.html , checkloginStatus () должен обнаружить пользователя регистрированного входа и отобразить значок профиля вместо кнопок входа/регистрации. />
Вопрос: < /strong>

Почему мой checkloginstatus () < /code> не обнаруживает состояние регистрации после перенаправления, и как я могу исправить это, так что значок профиля правильно? index.html кнопки заголовка [/b] Так что рецензенты могут увидеть структуру DOM?

Подробнее здесь: https://stackoverflow.com/questions/797 ... r-redirect