查看权限控制机制和这两个函数的使用位置：
项目权限控制机制
1. 角色定义
后端模型(internal/models/user.go):
const(RoleAdmin Role=1// 管理员RoleViewer Role=0// 查看者)前端类型(web/src/util/auth.ts):
role: number-0= Viewer,1= Admin
2. 后端权限控制
JWT Token 生成 (pkg/middleware/auth.go)
登录时生成 token，包含：
user_id,email,name,role,exp
中间件
AuthRequired()- 身份验证
- 从
Authorizationheader 读取 token - 解析 JWT，提取
user_id/email/name/role存入gin.Context - 无效 token 返回 401
AdminRequired()- 管理员权限
- 检查
role是否为1 - 不是管理员返回 401
路由应用示例
// routes/testcase.gor.Use(authMiddleware.AuthRequired())// 整个组需要登录r.POST("/add",middleware.AdminRequired(),view.AddTestCase)// 特定接口需要管理员// routes/testplan.gor.Use(authMiddleware.AuthRequired())r.Use(middleware.AdminRequired())// 整个组都需要管理员3. 前端权限控制
getUserInfoFromToken()- 解析用户信息
实现逻辑:
exportfunctiongetUserInfoFromToken():UserInfo|null{consttoken=localStorage.getItem('token');if(!token)returnnull;try{constdecoded:any=jwtDecode(token);return{user_id:Number(decoded.user_id),email:decoded.email,name:decoded.name,role:Number(decoded.role),// 0 或 1};}catch{return{user_id:0,email:'guest',name:'guest',role:0};}}使用位置:
Layout.tsx(第20行) - 显示用户名和角色标签TestCaseDetail.tsx(第55/110/174行) - 获取当前用户信息OwnerSelector.tsx(第26行) - 设置默认 owner
getUserRole()- 获取角色
实现逻辑:
exportfunctiongetUserRole():number{constinfo=getUserInfoFromToken();returninfo?.role??0;// 默认返回 0 (Viewer)}使用位置:
TestCaseList.tsx(第73行) - 控制删除/编辑按钮显示ComponentList.tsx(第36行) - 页面级权限检查TestPlan.tsx(第13行) - 控制功能可见性TagList.tsx(第52行) - 控制创建/编辑按钮
4. 前端权限控制示例
示例1: 菜单显示 (Layout.tsx)
constuserRole=userInfo?.role??0;constmenuItems=[{key:'/',icon:<FileTextOutlined/>,label:'Test Cases'},...(userRole===1?[// 只有管理员才显示 Test Plans{key:'/testplan',icon:<ProjectOutlined/>,label:'Test Plans'},]:[])];示例2: 页面级权限检查 (ComponentList.tsx)
constrole=getUserRole();useEffect(()=>{if(role!==1){message.error('You do not have permission to access component management');navigate('/');return;}},[role]);示例3: 按钮显示控制 (TestCaseList.tsx)
constrole=getUserRole();// 在渲染时根据 role 控制按钮显示{role===1&&(<Button onClick={handleDelete}>Delete</Button>)}5. 权限控制流程图
用户登录 ↓ 后端生成 JWT (包含 role) ↓ 前端存储 token 到 localStorage ↓ 前端调用 getUserInfoFromToken() 解析 token ↓ 根据 role 控制 UI 显示/隐藏 ↓ API 请求时携带 token ↓ 后端 AuthRequired() 验证身份 ↓ 后端 AdminRequired() 检查 role === 1 ↓ 允许/拒绝请求6. 权限控制总结
| 层级 | 控制方式 | 位置 |
|---|---|---|
| 后端路由级 | AuthRequired()+AdminRequired() | routes/*.go |
| 后端接口级 | AdminRequired()中间件 | 特定路由 |
| 前端页面级 | getUserRole()检查 + 跳转 | useEffect |
| 前端组件级 | role === 1条件渲染 | JSX |
| 前端菜单级 | userRole === 1动态菜单 | Layout.tsx |
7. 关键函数使用统计
getUserInfoFromToken(): 5 处使用- Layout (显示用户信息)
- TestCaseDetail (3处，获取用户信息)
- OwnerSelector (设置默认值)
getUserRole(): 4 处使用- TestCaseList (按钮控制)
- ComponentList (页面权限)
- TestPlan (功能控制)
- TagList (按钮控制)
该设计采用前后端双重校验：前端控制 UI，后端保证安全性。
