如何限制未登录用户直接访问accounts.html账户页面？

嘿，很棒你已经靠Cookies搞定了这个未授权访问的漏洞！我来把这个方案的细节拆解清楚，方便你后续优化或者其他遇到同样问题的开发者参考~

你的场景很典型：开发了login.html（带用户名密码表单）和accounts.html（登录后展示账户信息），但未登录用户直接在地址栏输入URL就能跳转到accounts.html，这显然存在安全风险。下面是基于Cookies实现登录校验的完整思路和代码示例：

具体实现步骤 #

1. 登录成功时设置认证Cookie #

在login.html的表单提交逻辑里（不管是前端JS配合后端接口，还是纯后端处理），当验证用户名密码正确后，设置一个带有登录标识的Cookie：

// 假设登录验证通过后执行这段代码
document.cookie = "isLoggedIn=true; path=/; max-age=3600; secure; SameSite=Strict";

• isLoggedIn=true：自定义的登录状态标识，用来判断用户是否已登录
• path=/：确保整个网站下的页面都能读取到这个Cookie
• max-age=3600：设置Cookie有效期为1小时（可根据业务需求调整时长）
• secure：仅在HTTPS连接下传递Cookie（如果你的网站是HTTPS协议，强烈建议加上这个属性）
• SameSite=Strict：防止跨站请求伪造（CSRF）攻击，提升安全性

2. 在accounts.html添加登录校验逻辑 #

在accounts.html页面加载的瞬间，先检查是否存在有效的登录Cookie，如果没有就直接跳转到登录页：

window.addEventListener('load', function() {
    // 从Cookie中提取登录状态
    const loginStatus = document.cookie.split('; ')
        .find(row => row.startsWith('isLoggedIn='))
        ?.split('=')[1];
    
    // 如果未检测到有效登录状态，跳转至登录页
    if (!loginStatus || loginStatus !== 'true') {
        window.location.href = 'login.html';
    }
});

3. 登出时清除认证Cookie #

如果你的系统有登出功能，记得在用户点击登出时清除这个Cookie，确保用户登出后无法再直接访问accounts.html：

function handleLogout() {
    // 清除登录状态Cookie
    document.cookie = "isLoggedIn=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    // 跳转到登录页面
    window.location.href = 'login.html';
}

重要提醒 #

前端的Cookie校验只是前端层面的防护，恶意用户可以通过手动修改Cookie绕过这个校验。所以一定要配合后端校验：后端在处理accounts.html的请求时，必须检查用户的真实登录状态（比如验证Session或者Token），只有已登录的用户才返回页面内容，否则返回401未授权或者直接跳转到登录页。

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