在 javascript 中实现接口请求的 rbac（基于角色的访问控制）策略，核心做法是在发起 http 请求前拦截并校验当前用户的权限标识。具体而言，你需要维护一个全局的用户状态对象来存储角色信息，并在封装 fetch 函数时加入权限判断逻辑。如果用户拥有该接口所需的角色或权限标签，则正常发送请求；否则直接抛出错误或返回空数据，从而在前端层面阻断未授权访问。
fetch 拦截器如何根据角色过滤请求
通过创建一个高阶函数或包装器来接管 fetch 调用，可以在请求发出前检查 requiredRoles 参数。若当前登录用户的角色不在允许列表中，则立即拒绝 Promise 并抛出 UnauthorizedError。这种做法确保了所有网络请求都经过统一的权限网关处理，无需在每个业务组件中重复编写权限判断代码。
const USER_ROLES = { ADMIN: 'admin', EDITOR: 'editor', VIEWER: 'viewer' };
let currentUser = {
id: 1,
role: USER_ROLES.EDITOR,
permissions: ['read', 'write']
};
class UnauthorizedError extends Error {
constructor(message) {
super(message);
this.name = 'UnauthorizedError';
}
}
function checkPermission(requiredRole) {
if (currentUser.role !== requiredRole) {
throw new UnauthorizedError(`User ${currentUser.role} cannot access resource requiring ${requiredRole}`);
}
}
async function secureFetch(url, options = {}) {
// 假设 URL 中包含角色要求，例如 /api/data?role=admin
const urlObj = new URL(url, window.location.origin);
const requiredRole = urlObj.searchParams.get('role');
if (requiredRole) {
checkPermission(requiredRole);
}
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
if (error instanceof UnauthorizedError) {
console.warn('Access denied:', error.message);
return null; // 或者返回特定结构表示无权限
}
throw error;
}
}
// 测试：管理员可以访问
secureFetch('/api/admin/dashboard?role=admin').then(data => console.log('Admin Data:', data));
// 测试：编辑者尝试访问管理员接口，应被拦截
secureFetch('/api/admin/users?role=admin').catch(err => console.error(err.name));权限配置表如何映射到前端路由与请求
将后端定义的权限规则转化为前端可读取的配置表，是实现 RBAC 的关键步骤。通常我们会定义一个静态的权限映射对象，将 API 路径或资源 ID 与所需角色绑定。在请求拦截器中，解析目标资源的权限需求并与当前用户权限进行比对。这种映射方式使得权限管理集中化，当后端角色体系变更时，只需更新前端配置表即可同步生效，无需修改核心请求逻辑。
立即学习“Java免费学习笔记（深入）”；
// 权限配置映射表
const PERMISSION_MAP = {
'/api/admin': { role: 'admin', desc: '后台管理模块' },
'/api/editor': { role: 'editor', desc: '内容编辑模块' },
'/api/public': { role: 'viewer', desc: '公开浏览模块' }
};
function getRequiredRole(path) {
for (const [route, config] of Object.entries(PERMISSION_MAP)) {
if (path.startsWith(route)) {
return config.role;
}
}
return null; // 默认无特殊限制
}
async function enhancedSecureFetch(url, options = {}) {
const urlObj = new URL(url, window.location.origin);
const path = urlObj.pathname;
const requiredRole = getRequiredRole(path);
if (requiredRole) {
checkPermission(requiredRole);
}
try {
const response = await fetch(url, options);
return response.json();
} catch (error) {
if (error instanceof UnauthorizedError) {
return { error: 'FORBIDDEN', message: error.message };
}
throw error;
}
}
// 验证：编辑器访问公共接口
enhancedSecureFetch('/api/public/news').then(res => console.log('Public News:', res));
// 验证：编辑器访问编辑接口
enhancedSecureFetch('/api/editor/posts').then(res => console.log('Editor Posts:', res));
// 验证：编辑器访问管理接口，应返回 FORBIDDEN
enhancedSecureFetch('/api/admin/settings').then(res => console.log('Admin Settings:', res));当用户角色为 null 或未登录时如何处理请求
在实际应用中，用户可能处于未登录状态，此时 currentUser 中的 role 字段可能为 null 或 undefined。在这种情况下，任何需要特定角色的请求都应被视为未授权。我们需要在 checkPermission 函数中增加对空值的防御性检查。如果角色为空，直接抛出异常，阻止请求发出，并引导用户前往登录页面。这确保了系统的安全性，防止匿名用户意外触发受保护的资源访问。
