Node.js角色权限控制求助：未登录用户可直接访问受限页面

问题梳理 #

刚接触后端开发，有前端JS经验，选择Node.js做后端。现在实现RBAC时遇到以下问题：

• 需求：未登录用户仅能访问登录、注册页面；不同角色用户只能访问对应权限的页面
• 当前状态：已实现登录生成含角色的JWT并存在localStorage，写了authenticateToken中间件，但未登录用户篡改URL就能直接进入受限页面，前端角色验证逻辑完全失效

核心问题 #

前端的验证逻辑完全不可靠——任何人都可以修改前端代码、篡改localStorage里的token或直接输入URL绕过校验。权限控制的核心必须放在后端，前端仅做体验层面的跳转优化。

解决方案 #

一、后端权限校验加固 #

1. 完善authenticateToken中间件

确保未携带有效JWT的请求直接返回401，同时解析出用户角色挂载到请求对象：

// 权限验证中间件
function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1]; // 提取Bearer后的token

  if (!token) {
    return res.sendStatus(401); // 无token直接返回未授权
  }

  jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
    if (err) {
      return res.sendStatus(403); // token无效/过期返回权限不足
    }
    req.user = decoded; // 将用户信息（含role）挂载到req，供后续中间件使用
    next();
  });
}

2. 新增角色校验中间件

创建通用的角色校验函数，针对不同路由配置所需角色：

function requireRole(requiredRole) {
  return (req, res, next) => {
    // 确保authenticateToken已执行，用户信息存在
    if (!req.user || req.user.role !== requiredRole) {
      return res.sendStatus(403); // 角色不匹配返回权限不足
    }
    next();
  };
}

3. 路由配置严格校验

登录、注册路由无需校验，其他路由必须先过authenticateToken，再根据需求添加角色校验：

// app.js 路由配置示例
const express = require('express');
const app = express();

// 无需校验的路由：登录、注册
app.use('/auth', authRouter);

// 学生专属路由：先验证登录，再验证角色
app.use('/student', authenticateToken, requireRole('student'), studentRouter);

// 教师专属路由同理
app.use('/teacher', authenticateToken, requireRole('teacher'), teacherRouter);

二、前端逻辑修正 #

前端仅做跳转引导，不能依赖前端解析token判断权限，必须调用后端接口验证有效性：

// 学生主页（student.html）加载时的校验逻辑
window.onload = async () => {
  const token = localStorage.getItem('token');
  
  // 无token直接跳登录页
  if (!token) {
    location.href = '/login.html';
    return;
  }

  try {
    // 调用后端验证接口，确认token有效性和角色
    const res = await fetch('/api/verify', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });

    // 验证失败：清除无效token，跳登录页
    if (res.status !== 200) {
      throw new Error('权限验证失败');
    }

    const user = await res.json();
    // 额外做前端体验优化：如果角色不匹配，跳转到对应页面或提示
    if (user.role !== 'student') {
      alert('无权限访问该页面');
      location.href = '/index.html';
    }
  } catch (err) {
    localStorage.removeItem('token');
    location.href = '/login.html';
  }
};

三、优化方案（可选） #

• 改用HTTP-only Cookie存储JWT：比localStorage更安全，能避免XSS攻击窃取token
• 多角色支持中间件：扩展requireRole为requireRoles(allowedRoles)，支持多个角色访问同一路由

  function requireRoles(allowedRoles) {
    return (req, res, next) => {
      if (!req.user || !allowedRoles.includes(req.user.role)) {
        return res.sendStatus(403);
      }
      next();
    };
  }
  

• 前端框架路由守卫：如果用Vue/React，使用框架自带的路由守卫（如Vue Router的beforeEach）统一处理权限校验，比原生JS更规范
• 统一错误处理：后端返回401/403时携带错误信息，前端根据状态码区分处理（401跳登录，403提示无权限）

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