如何不使用PHP阻止用户未认证直接访问仪表盘页面

核心思路 #

用前端存储（localStorage 或 sessionStorage）记录用户认证状态，在仪表盘页面加载时校验状态，未通过则跳转回登录页，同时可把校验逻辑放在外部JS文件里，无需嵌入到页面中。

具体步骤 #

1. 登录成功后标记认证状态
   在你的登录验证JS文件中，当密码验证通过后，添加代码存储认证状态：

// 密码验证通过后执行
// 用sessionStorage：关闭浏览器自动清除状态；用localStorage：状态会持久保存
sessionStorage.setItem('userAuthenticated', 'true');
// 或者 localStorage.setItem('userAuthenticated', 'true');

2. 仪表盘页面加载时校验状态
   创建独立JS文件（比如auth-guard.js），写入校验逻辑：

window.addEventListener('DOMContentLoaded', function() {
  const authStatus = sessionStorage.getItem('userAuthenticated');
  // 校验状态，未认证则跳转登录页
  if (!authStatus || authStatus !== 'true') {
    window.location.href = '/index.html'; // 替换为你的登录页路径
  }
});

然后在dashboard.html的<head>或<body>末尾引入这个JS文件：

<script src="/path/to/auth-guard.js"></script>

重要提醒 #

这种纯前端方案存在安全性局限：用户可手动修改浏览器的localStorage/sessionStorage值绕过校验。如果系统涉及敏感数据，建议配合后端校验——比如后端设置HttpOnly Cookie，前端访问仪表盘时后端验证Cookie有效性，但这需要后端语言支持。不过普通场景下，纯前端方案足够满足需求。

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