Vue3+NestJS实现权限管理系统(后端篇)七:接口按钮权限控制

文摘   2024-10-17 09:08   上海  

上一篇文章我们已经知道了什么是 RBAC 权限管理并且完成了菜单相关权限的处理。当然,一个管理系统仅仅对菜单做权限管理很显然是不够的,除此之外我们在前端还需要对一些按钮进行权限管理,而对应的后端则是对这些按钮调用的接口进行权限验证。前端通过登录获取该用户所有权限字段,然后在按钮中通过自定义指令的方式传入这个按钮所需要的权限字段,通过判断这个用户的权限是否包含这个按钮的权限来控制按钮的显示与隐藏,示例如下

<el-button
  type="primary"
  plain
  icon="Plus"
  @click="handleAdd"
  v-hasPermi="['system:user:add']"
  >
新增</el-button
>

对于后端同样的根据登录用户获取其全部权限,在controller中定义一个自定义装饰器传入这个接口所需要的权限,然后写一个导航守卫guard拿到这个权限判断这个权限是否在这个用户的权限中决定放不放行,示例如下

  @UseGuards(PermissionsGuard)
  @Permissions('system:user:add')
  @Post('/test')
  async test(@Request() req) {
    return 'success';
  }

本篇文章我们将用 NestJS 中的守卫Guard、自定义装饰器decorator结合Redis来实现后端部分

对于按钮来说,我们也将其视为一个菜单,所以添加按钮权限只需要插入一条类型为 3(按钮)的菜单和一个自定义权限字符串permission即可

web前端进阶
坚持原创,分享前端技术文章。
 最新文章