javascript项目中用msw模拟用户权限接口，通过拦截/api/user/permission请求返回预设角色权限数据，配合登录态模拟和权限校验hook实现开发阶段权限逻辑验证。
在 JavaScript 项目中，用 Mock 模拟用户权限接口，核心是**拦截真实请求、返回预设的权限数据**，让前端开发不依赖后端联调即可验证权限控制逻辑（比如按钮显隐、路由跳转、菜单渲染等）。
用 Mock 工具拦截请求（推荐 MSW 或 Mock Service Worker）
MSW 是目前主流选择，它在浏览器网络层拦截请求，不侵入业务代码，支持运行时动态切换 Mock 状态：
- 安装：
npm install msw --save-dev - 定义权限接口 Mock：例如
/api/user/permission返回不同角色的权限列表 - 示例 handler：
import { rest } from 'msw';
export const handlers = [
rest.get('/api/user/permission', (req, res, ctx) => {
const role = req.url.searchParams.get('role') || 'user';
const permissions = {
admin: ['user:list', 'user:edit', 'config:manage'],
editor: ['user:list', 'user:edit'],
user: ['user:profile']
};
return res(ctx.status(200), ctx.json({ code: 0, data: permissions[role] || [] }));
})
];
启动 MSW 后，所有对 /api/user/permission 的 fetch 或 axios 请求都会被拦截并返回模拟数据。
配合登录态模拟完整权限流
权限通常和登录态绑定。Mock 时可同时模拟登录接口，把角色信息存入 localStorage 或 context，再在权限请求中读取：
- Mock
POST /api/login，根据用户名返回对应角色（如admin、editor） - 在权限接口 handler 中，从
localStorage.getItem('userRole')读取角色，动态返回权限数组 - 这样切换登录账号就能测试不同权限下的页面表现
在组件中安全使用 Mock 权限数据
避免直接写死权限字符串，建议封装一个权限校验 Hook 或工具函数：
- 例如
useHasPermission('user:edit')内部调用fetch('/api/user/permission')并缓存结果 - Mock 环境下该请求走 MSW，返回预设值；生产环境走真实接口
- 组件内用
{hasPermission('config:manage') && <settingsbutton></settingsbutton>}控制渲染
注意与真实环境隔离
Mock 仅用于开发和测试，务必确保上线时完全关闭：
- MSW 默认只在
process.env.NODE_ENV === 'development'启动 - 权限接口 URL 统一配置（如通过
API_BASE_URL），Mock 时指向本地 handler，生产指向真实域名 - 不要在 Mock 数据里写敏感逻辑（如权限降级规则），这些应由后端控制
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
