在 javascript 中实现基于 fetch api 的 rbac（基于角色的访问控制）策略，核心做法是在请求拦截器中检查当前用户的角色权限，并根据权限决定是否发送请求或如何处理响应。具体而言，你需要维护一个用户角色状态，并在每次发起 fetch 请求前，通过中间件或封装函数验证该角色是否拥有访问特定资源的路由权限。如果权限不足，则直接拒绝 promise 或返回空数据；如果权限存在，则正常执行网络请求并处理响应。
如何在请求发出前根据角色拦截未授权访问
要在请求发出前拦截未授权访问，最直接的方法是使用自定义的 fetchWrapper 函数或在 Axios 等库的请求拦截器中实现。你需要定义一个权限映射表，将 URL 路径或资源 ID 与允许的角色列表关联。在调用原生 fetch 之前，先查询当前用户的 role 是否在目标资源的允许列表中。若不在，立即抛出错误或返回特定的错误对象，从而阻止实际的 HTTP 请求发出，节省带宽并提高安全性。
// 假设的全局权限配置
const PERMISSIONS = {
'/admin/users': ['admin'],
'/api/data': ['admin', 'editor'],
'/public/info': ['admin', 'editor', 'viewer']
};
// 当前用户角色
let currentUserRole = 'viewer';
async function secureFetch(url, options = {}) {
// 1. 检查权限
const allowedRoles = PERMISSIONS[url];
if (allowedRoles && !allowedRoles.includes(currentUserRole)) {
throw new Error('Forbidden: Insufficient permissions');
}
// 2. 执行实际请求
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Fetch failed:', error);
throw error;
}
}
上述代码展示了如何封装 fetch。首先定义 PERMISSIONS 对象，键为路径，值为角色数组。在 secureFetch 中，先校验 currentUserRole 是否在 allowedRoles 中。如果校验失败，直接抛出异常，后续代码不会执行。如果校验通过，则调用原生的 fetch 并返回解析后的 JSON 数据。这种方式确保了前端在发送请求前就进行了第一道防线过滤。
如何处理后端返回的 403 状态码以更新 UI 状态
即使前端做了拦截，后端仍可能因会话过期或动态权限变更返回 403 Forbidden。此时，需要在响应拦截器或 catch 块中专门处理 403 状态。当检测到 response.status === 403 时，应清除本地存储的敏感信息（如 Token），并重定向用户到登录页或无权限提示页。同时，可以更新全局状态管理（如 Redux 或 Context）中的用户认证状态，确保 UI 组件不再渲染受保护的内容。
async function handleResponse(response) {
if (response.status === 403) {
// 清除本地存储的 Token
localStorage.removeItem('authToken');
// 重定向到登录页
window.location.href = '/login?reason=forbidden';
throw new Error('Session expired or forbidden');
}
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.status}`);
}
return response.json();
}
// 使用示例
try {
const data = await secureFetch('/admin/users');
renderAdminPanel(data);
} catch (e) {
if (e.message.includes('forbidden')) {
showNotification('You do not have permission to view this page.');
}
}
这段代码补充了 handleResponse 逻辑。在 secureFetch 成功获取响应后，传入 handleResponse。如果状态码是 403，代码会移除 localStorage 中的 authToken，并将页面重定向到 /login。这确保了即使用户通过某种方式绕过了前端拦截，也无法继续使用过期的凭证访问受保护资源。同时，catch 块捕获异常后，可以根据错误消息显示友好的通知，提升用户体验。
当用户角色从 viewer 升级为 editor 时，缓存的数据如何处理
当用户角色从 viewer 升级为 editor 时，之前缓存的仅包含只读数据的结果可能不再适用，因为 editor 角色可能有权访问编辑接口或更详细的数据字段。此时，必须强制失效相关 API 的缓存。可以通过在角色变更事件中触发一个清理函数，删除对应 URL 键值的缓存条目，或者在下次请求时添加 Cache-Control: no-cache 头来绕过缓存。这样能确保用户立即获得符合新角色权限的最新数据，避免看到过时或受限的信息。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
