使用HTML+JS实现登录页后如何禁止用户直接访问跳转后的内页

你当前的登录校验逻辑全部在前端实现，账号密码明文写在JS代码中，任何人查看页面源码即可直接获取账号信息，安全性极低。如果需要实现内页访问控制，可参考以下两种方案：

推荐方案：后端鉴权（安全不可绕过） #

这是生产环境唯一可用的安全方案，实现逻辑如下：

• 移除前端写死的账号密码校验逻辑，前端将用户输入的账号密码加密后提交到后端接口
• 后端完成账号密码校验，校验通过后为当前用户签发有效token，或设置session会话标识，存储在用户浏览器cookie中
• 所有内页（about.html、about2.html等）的请求都需要先经过后端路由拦截：如果请求带的token/session无效，直接重定向到登录页，不返回内页内容
• 也可在内页加载时先发请求到后端校验登录状态，校验失败立即跳转回登录页

临时方案：纯前端校验（仅适用于测试/低安全场景，可被技术用户绕过） #

如果暂时没有后端支持，可通过本地存储标记的方式实现基础拦截，步骤如下：

1. 修改现有登录页的校验逻辑，登录成功后存储登录标记：

function myFunction(){
  var user = document.getElementById("username").value;
  var pass = document.getElementById("pass").value;
  let targetPage = ''
  if(user == "user1" && pass == "zzxx"){
    targetPage = "about.html"
  } else if(user == "user2" && pass == "xxzz"){
    targetPage = "about2.html"
  } else if(user == "user3" && pass == "ooppp"){
    targetPage = "about3.html"
  } else{
    alert("Incorrect username or password");
    return
  }
  // 存储登录状态标记
  localStorage.setItem('loginStatus', 'valid')
  // 可以额外存储当前登录用户，用来做内页权限细分
  localStorage.setItem('loginUser', user)
  window.location.href = targetPage
}

2. 在每个内页的<head>标签中加入校验代码，页面加载时先校验登录状态：

// 所有内页都需要加入这段代码
if(!localStorage.getItem('loginStatus')){
  // 未登录直接跳回登录页，替换成你自己的登录页地址
  window.location.href = 'login.html'
}
// 可选：如果需要控制用户只能访问自己对应的内页，可以再加一层校验
const currentUser = localStorage.getItem('loginUser')
if((currentUser === 'user1' && !location.pathname.includes('about.html')) 
|| (currentUser === 'user2' && !location.pathname.includes('about2.html'))
|| (currentUser === 'user3' && !location.pathname.includes('about3.html'))){
  alert('无权限访问该页面')
  window.location.href = 'login.html'
}

3. 可选：添加退出登录功能，用户点击退出时清除存储的标记：

function logout(){
  localStorage.removeItem('loginStatus')
  localStorage.removeItem('loginUser')
  window.location.href = 'login.html'
}

注意：该纯前端方案可被用户通过浏览器控制台修改本地存储内容绕过，仅可用于临时测试场景，不可用于生产环境。

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