前言

接着来聊聊若依前后端分离版的权限注解吧。若依前后端分离版的权限注解是一种基于Spring Security和Vue的权限管理系统，它可以实现对用户、角色、菜单、按钮等资源的控制和分配。它的前台后台分别是怎么实现的呢？我来简单介绍一下：

• 前台实现：前台使用了Vue框架，以及ElementUI组件库，通过axios发送ajax请求和后台交互。使用了一个自定义的指令v-hasPermi，用来判断用户是否具有某个按钮或菜单的权限。这个指令会从store中获取用户所拥有的所有权限，然后与传入的参数进行匹配，如果匹配成功，就显示该按钮或菜单，否则就移除该节点。这样可以实现前台的权限控制和过滤。
• 后台实现：后台使用了Spring Boot框架，以及SpringSecurity组件，通过JWT进行认证和授权。后台使用了一个自定义的注解@DataScope，用来实现数据范围的控制（这个之前讲过，感兴趣的小伙伴可以往前翻一下）。这个注解会根据用户所属的角色和部门，动态生成sql语句，用来过滤数据。这样可以实现后台的权限控制和过滤。

前端部分

封装了一个指令权限，能简单快速的实现按钮级别的权限判断。v-permission。使用权限字符串 v-hasPermi。

// 单个
<el-button v-hasPermi="['system:user:add']">存在权限字符串才能看到</el-button>
// 多个
<el-button v-hasPermi="['system:user:add', 'system:user:edit']">包含权限字符串才能看到</el-button>

使用角色字符串 v-hasRole

// 单个
<el-button v-hasRole="['admin']">管理员才能看到</el-button>
// 多个
<el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>

提示

在某些情况下，它是不适合使用v-hasPermi，如元素标签组件，只能通过手动设置v-if。 可以使用全局权限判断函数，用法和指令 v-hasPermi 类似。

举个栗子：

<template>
  <el-tabs>
    <el-tab-pane v-if="checkPermi(['system:user:add'])" label="用户管理" name="user">用户管理</el-tab-pane>
    <el-tab-pane v-if="checkPermi(['system:user:add', 'system:user:edit'])" label="参数管理" name="menu">参数管理</el-tab-pane>
    <el-tab-pane v-if="checkRole(['admin'])" label="角色管理" name="role">角色管理</el-tab-pane>
    <el-tab-pane v-if="checkRole(['admin','common'])" label="定时任务" name="job">定时任务</el-tab-pane>
   </el-tabs>
</template>

<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数

export default{
   methods: {
    checkPermi,
    checkRole
  }
}
</script>

前端有了鉴权后端还需要鉴权吗？

前端的鉴权只是一个辅助功能，对于专业人员这些限制都是可以轻松绕过的，为保证服务器安全，无论前端是否进行了权限校验，后端接口都需要对会话请求再次进行权限校验！

后端部分

Spring Security提供了Spring EL表达式，允许我们在定义接口访问的方法上面添加注解，来控制访问权限。

@PreAuthorize注解用于配置接口要求用户拥有某些权限才可访问，它拥有如下方法：

举个栗子：

1、数据权限示例。

// 符合system:user:list权限要求
@PreAuthorize("@ss.hasPermi('system:user:list')")

// 不符合system:user:list权限要求
@PreAuthorize("@ss.lacksPermi('system:user:list')")

// 符合system:user:add或system:user:edit权限要求即可
@PreAuthorize("@ss.hasAnyPermi('system:user:add,system:user:edit')")

2、角色权限示例

// 属于user角色
@PreAuthorize("@ss.hasRole('user')")

// 不属于user角色
@PreAuthorize("@ss.lacksRole('user')")

// 属于user或者admin之一
@PreAuthorize("@ss.hasAnyRoles('user,admin')")

其中@ss代表的是PermissionService (opens new window)服务，对每个接口拦截并调用PermissionService的对应方法判断接口调用者的权限。

权限提示： 超级管理员拥有所有权限，不受权限约束。

公开接口

如果有些接口是不需要验证权限可以公开访问的，这个时候就需要我们给接口放行。

使用注解方式，只需要在Controller的类或方法上加入@Anonymous该注解即可。

// @PreAuthorize("@ss.xxxx('....')") 注释或删除掉原有的权限注解
@Anonymous
@GetMapping("/list")
public List<SysXxxx> list(SysXxxx xxxx)
{
    return xxxxList;
}

结语

这是最轻松的一期了，大部分数据来源于若依前后端分离版开发手册，大家想要学习好一门技术，看文档一定是必不可少的。

所以一定要养成看文档的好习惯啊。那么以上就是唐某的一些理解。这次的分享就到这里了。记得一键三连~( •̀ ω •́ )✧