如何通过原生JS实现页面内容切换与未登录页面访问限制？

以下是几种实用的实现方式：

1. 基于状态条件切换内容 #

通过判断登录状态、用户角色等变量，动态修改DOM内容或控制元素显示：

// 示例：根据登录状态展示不同内容
const isLoggedIn = localStorage.getItem('loggedIn') === 'true';
const contentBox = document.getElementById('content-box');

if (isLoggedIn) {
  contentBox.innerHTML = `
    <h2>欢迎回来</h2>
    <p>您的个人项目已加载</p>
  `;
} else {
  contentBox.innerHTML = `
    <h2>请登录</h2>
    <button id="login-btn">立即登录</button>
  `;
}

2. 交互触发内容切换 #

给按钮、导航等元素绑定点击事件，切换显示内容：

<!-- 页面结构 -->
<button class="tab-btn" data-target="profile">个人资料</button>
<button class="tab-btn" data-target="projects">我的项目</button>
<div id="content-container"></div>

// 切换逻辑
const contentContainer = document.getElementById('content-container');
const tabBtns = document.querySelectorAll('.tab-btn');

tabBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const target = btn.dataset.target;
    if (target === 'profile') {
      contentContainer.textContent = '姓名：XXX | 邮箱：xxx@example.com';
    } else if (target === 'projects') {
      contentContainer.innerHTML = '<ul><li>项目A：前端重构</li><li>项目B：数据可视化</li></ul>';
    }
  });
});

3. 根据URL参数加载内容 #

读取URL中的查询参数，渲染对应页面内容：

// 示例：URL为 https://your-site.com?view=projects
const urlParams = new URLSearchParams(window.location.search);
const viewType = urlParams.get('view');
const content = document.getElementById('main-content');

switch(viewType) {
  case 'projects':
    content.innerHTML = '<h3>项目列表</h3><p>项目详情展示...</p>';
    break;
  case 'settings':
    content.innerHTML = '<h3>账户设置</h3><p>修改密码、绑定邮箱...</p>';
    break;
  default:
    content.innerHTML = '<h3>首页</h3><p>欢迎访问个人项目平台</p>';
}

前端临时拦截（仅作体验优化，不能替代后端验证） #

页面加载时检查登录标识（如localStorage/sessionStorage中的Token），未登录则跳转登录页或隐藏内容：

window.addEventListener('DOMContentLoaded', () => {
  // 假设登录成功后存储了userToken
  const userToken = localStorage.getItem('userToken');
  
  if (!userToken) {
    // 未登录，跳转登录页面
    window.location.href = '/login.html';
    // 或者直接替换页面内容
    // document.body.innerHTML = '<div style="text-align:center; margin-top: 100px;"><h2>请先登录</h2><a href="/login.html">前往登录</a></div>';
  }
});

核心方案：后端访问控制 #

前端拦截容易被篡改绕过，必须在后端层面做校验：

1. 用户登录后，后端生成会话标识（如Session ID）或Token，存储在Cookie或返回给前端
2. 用户访问项目页面时，后端先校验请求中的会话/Token有效性
3. 校验失败则返回401状态码，并重定向到登录页

以Node.js/Express为例的后端校验逻辑：

// 登录校验中间件
const checkAuth = (req, res, next) => {
  if (req.session.user) { // 用Session存储登录状态
    next(); // 已登录，允许访问
  } else {
    res.redirect('/login'); // 未登录，跳转登录页
  }
};

// 项目页面路由，添加校验中间件
app.get('/projects', checkAuth, (req, res) => {
  res.sendFile(__dirname + '/projects.html');
});

针对你的项目，需要在后端代码中添加类似的校验逻辑，确保只有通过登录验证的请求才能获取项目页面内容。

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