SpringBoot3+Vue3 前后端分离项目基于RBAC权限访问控制-Sa-Token把权限精确到按钮级

SpringBoot3+Vue3 前后端分离项目实现基于RBAC权限访问控制-（1）权限管理

SpringBoot3+Vue3 前后端分离项目实现基于RBAC权限访问控制-（2）角色管理

SpringBoot3+Vue3 前后端分离项目实现基于RBAC权限访问控制-（3）用户管理

SpringBoot3+Vue3 前后端分离项目基于RBAC权限访问控制-实现动态路由、动态菜单

SpringBoot3+Vue3 前后端分离项目基于RBAC权限访问控制-Sa-Token把权限精确到按钮级

1.后端

1.1 后端实现 Sa-Token封装的 StpInterface接口，获取当前账号权限码集合

package com.dragon.springboot3vue3.service.impl;

import cn.dev33.satoken.stp.StpInterface;
import com.dragon.springboot3vue3.entity.Menu;
import com.dragon.springboot3vue3.entity.Role;
import com.dragon.springboot3vue3.entity.RoleMenu;
import com.dragon.springboot3vue3.entity.UserRole;
import com.dragon.springboot3vue3.service.IMenuService;
import com.dragon.springboot3vue3.service.IRoleMenuService;
import com.dragon.springboot3vue3.service.IRoleService;
import com.dragon.springboot3vue3.service.IUserRoleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * 自定义权限接口实现类
 */
@Component
public class StpInterfaceImpl implements StpInterface {
    @Autowired
    private IUserRoleService userRoleService;
    @Autowired
    private IRoleService roleService;
    @Autowired
    private IRoleMenuService roleMenuService;
    @Autowired
    private IMenuService menuService;

    /**
     * 返回一个账号所拥有的角色集合
     */
    @Override
    public List<String> getRoleList(Object loginId, String loginType) {
        List<String> roleIds=getRoleIdList(loginId);
        List<Role> roleList = roleService.lambdaQuery().in(Role::getId, roleIds).list();
        return roleList.stream().map(Role::getRole).toList();
    }

     /**
     * 返回一个账号所拥有的权限集合（按钮权限）
     */
    @Override
    public List<String> getPermissionList(Object loginId, String loginType) {
        List<String> roleIds=getRoleIdList(loginId);

        // 根据 roleId 查 menuId
        List<RoleMenu> list = roleMenuService.lambdaQuery().in(RoleMenu::getRoleId, roleIds).list();
        List<String> menuIds=list.stream().map(RoleMenu::getMenuId).toList();

        List<Menu> menuList=menuService.lambdaQuery().in(Menu::getId,menuIds).list();
        List<String> permissionList = menuList.stream()
                                              .filter(menu -> menu.getAuth() != null && !menu.getAuth().isEmpty())
                                              .map(Menu::getAuth)
                                              .toList();
        return permissionList;
    }

    /**
     * 根据 loginId 获取 角色ID列表
     * @param loginId
     * @return
     */
    public List<String> getRoleIdList(Object loginId) {
        List<UserRole> list = userRoleService.lambdaQuery().eq(UserRole::getUserId, loginId).list();
        List<String> roleIds=list.stream().map(UserRole::getRoleId).toList();
        return roleIds;
    }

}

1.2 定义 获取登录用户按钮权限码集合 Controller

@Operation(summary = "获取登录用户按钮权限列表")
@GetMapping("/getPermissionList")
    public SaResult getPermissionList(){
        return SaResult.ok().setData(StpUtil.getPermissionList());
    }

2.前端

2.1 定义后端API接口

2.2 pinia 定义按钮权限列表缓存

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const usePermissionListStore = defineStore(
  'permissionListStore', 
  () => {
    let permissionList = ref([])
    let set= (value:any)=>{
      permissionList.value=value;
    }
    let remove= ()=>{
      permissionList.value=[];
    }
    return { permissionList, set, remove }
  }
)

2.3 全局前置路由守卫调用后端 API，将数据存储到 pinia 缓存

2.4 添加按钮权限

2.5 用户设置角色，角色分配权限

2.5.1 用户设置角色

2.5.2 角色分配权限

2.6 在需要权限控制的按钮上，使用 js 进行逻辑判断

3.Sa-Token 成功把权限精确到按钮级