自定义接口并设置权限验证

目录

一、问题引出

二 、例子展现

前端部分 ：

后端部分：

三、自定义接口验证权限

四、总结

---

一、问题引出

   我们都知道在若依当中有很多接口访问的前提是登录了若依账号，可是在我们在没有登录若依时，例如我们取验证码的这个过程是在登录之前完成的，我们再随便举一个例子SysRoleController里边角色管理里边的功能都是要登录之后才能完成的  。它与 取验证码这个过程在注解上多了一个@PreAuthorize("@ss.hasPermi('system:role:list')") ，我们可以试着研究一下这个注解的功能

扫描二维码关注公众号，回复： 14828062 查看本文章

二 、例子展现

我们可以试着点进若依的系统管理模块里边的菜单管理模块可以看到对应的数据权限

前端部分 ：

我们可以直接选择角色管理模块对某个角色进行权限的给予与否

 点击对应的角色 右边的修改一栏就可以进行属性的修改和权限的修改

 勾选就可以进行赋予和删除权限。

我们只给用户ry系统管理模块的权限

换一个浏览器使用用户ry登录看看效果如何 ；

可以看到确实只有了一个系统管理模块，即权限确实少了；

后端部分：

我们使得用户ry权限减少到只有用户管理的用户查询和用户新增功能。其他模块都不给予；

 

可以看到确实只有了个用户查询功能和新增功能其他功能被屏蔽了；与此同时，后端也是无法访问的；

 此时前端报错“当前操作没有权限”。

---

此时我们大概可以得知后端通过了@ss.hasPermi('system:user:list')返回值控制权限；

返回true，表示具有授权[Authorize ]，能够继续访问
返回false，表示不具有授权，不能继续访问

三、自定义接口验证权限

我们可以通过形如@PreAuthorize（"@ss.hasPermi('system:xxx:xxx')"）的格式授予前端访问的权限；

我们可以通过在学生系统里边自定义一个权限验证的按钮；

首先打开菜单管理里边的学生信息管理系统里添加一个按钮

 

 前端部分添加了students/index.vue里边添加了以下代码：

      <el-col :span="1.5">
        <el-button
          type="exposed"
          plain
          size="mini"
          @click="debugTest"
          v-hasPermi="['system:students:debug']"
        >权限验证</el-button>
      </el-col>

并为这个新生成的按钮添加点击事件:debugTest

 debugTest(){
      alert("验证成功！");
    },

---

后端在MystudentsController里边添加

@PreAuthorize("@ss.hasPermi('system:students:debug')")
    @GetMapping("/debug")
    public AjaxResult DEBUG(MyStudents myStudents){
        return AjaxResult.success("Debug is successful!");
    }

此时打开学生信息管理系统 里边多了一个权限验证按钮 

 点击权限验证按钮 

 验证了权限的授予成功！

四、总结

菜单权限作用
前端：控制组件显示
后端：控制接口访问
后端接口源码分析
使用@PreAuthorize 注解
注解里函数hasPermi 会判断当前用户是否具有设定的权限

权限可以直接通过若依的角色管理给予授予