前端分角色控制权限

查看权限控制机制和这两个函数的使用位置：

项目权限控制机制

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};}}

使用位置:

1. Layout.tsx(第20行) - 显示用户名和角色标签
2. TestCaseDetail.tsx(第55/110/174行) - 获取当前用户信息
3. OwnerSelector.tsx(第26行) - 设置默认 owner

getUserRole()- 获取角色

实现逻辑:

exportfunctiongetUserRole():number{constinfo=getUserInfoFromToken();returninfo?.role??0;// 默认返回 0 (Viewer)}

使用位置:

1. TestCaseList.tsx(第73行) - 控制删除/编辑按钮显示
2. ComponentList.tsx(第36行) - 页面级权限检查
3. TestPlan.tsx(第13行) - 控制功能可见性
4. 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. 权限控制总结

7. 关键函数使用统计

• getUserInfoFromToken(): 5 处使用

  • Layout (显示用户信息)
  • TestCaseDetail (3处，获取用户信息)
  • OwnerSelector (设置默认值)

• getUserRole(): 4 处使用

  • TestCaseList (按钮控制)
  • ComponentList (页面权限)
  • TestPlan (功能控制)
  • TagList (按钮控制)

该设计采用前后端双重校验：前端控制 UI，后端保证安全性。