JavaScript 登入狀態檢測與按鈕顯示控制最佳實踐

需求場景

頁面載入時根據登入狀態動態顯示/隱藏按鈕，並處理 Session 過期跳轉登入頁後仍能正確隱藏。

核心策略：預設隱藏 + 後端渲染狀態

<!-- HTML：預設隱藏，避免閃爍 -->
<input type="button" id="btnAction" value="操作" style="display: none;" />

<script>
    // 後端模板引擎注入登入狀態 (JSP/Thymeleaf/Razor 等)
    var isLogined = '<%= session.getAttribute("user") != null %>'; // "true" 或 "false"
    
    if (isLogined === 'true') {
        document.getElementById('btnAction').style.display = '';
    }
</script>

進階：AJAX 輪詢檢測 Session 過期

function checkLoginStatus() {
    fetch('/api/auth/status', { credentials: 'include' })
        .then(res => res.json())
        .then(data => {
            const btn = document.getElementById('btnAction');
            if (data.loggedIn) {
                btn.style.display = '';
            } else {
                btn.style.display = 'none';
                // 可選：導向登入頁
                // window.location.href = '/login?redirect=' + encodeURIComponent(location.href);
            }
        });
}

// 頁面載入檢查
checkLoginStatus();

// 定期檢查 (每 5 分鐘)
setInterval(checkLoginStatus, 5 * 60 * 1000);

// 監聽 visibilitychange (頁面切回前台時檢查)
document.addEventListener('visibilitychange', () => {
    if (!document.hidden) checkLoginStatus();
});

後端 API 範例

// Spring Boot
@GetMapping("/api/auth/status")
public Map<String, Object> authStatus(HttpSession session) {
    return Map.of("loggedIn", session.getAttribute("user") != null);
}

避坑指南

現代框架整合 (Vue/React)

// Vue 3 Composition API
const isLoggedIn = ref(false);
const checkAuth = async () => {
    const res = await fetch('/api/auth/status');
    isLoggedIn.value = (await res.json()).loggedIn;
};
onMounted(() => { checkAuth(); setInterval(checkAuth, 300000); });

// 模板
<button v-if="isLoggedIn" @click="doAction">操作</button>