专栏首页cwl_JavaSaaS-分配权限

SaaS-分配权限

3 分配权限

3.1 需求分析

完成对角色权限的分配。

3.2 服务端代码实现

(1) 角色实体类中添加与权限的多对多关系并进行JPA配置

@JsonIgnore //忽略json转化
@ManyToMany
@JoinTable(name="pe_role_permission",
        joinColumns={@JoinColumn(name="role_id",referencedColumnName="id")},
        inverseJoinColumns= {@JoinColumn(name="permission_id",referencedColumnName="id")})
private Set<Permission> permissions = new HashSet<Permission>(0);//角色与模块 多对多

(2)控制器类( RoleController )添加权限分配

  /**
     * 分配权限
     */
    @RequestMapping(value = "/role/assignPrem", method = RequestMethod.PUT)
    public Result assignPrem(@RequestBody Map<String,Object> map) {
        //1.获取被分配的角色的id
        String roleId = (String) map.get("id");
        //2.获取到权限的id列表
        List<String> permIds = (List<String>) map.get("permIds");
        //3.调用service完成权限分配
        roleService.assignPerms(roleId,permIds);
        return new Result(ResultCode.SUCCESS);
   }

(3) 持久化类中添加分配权限方法

public void assignPerms(String roleId,List<String> permIds) {
        //1.获取分配的角色对象
        Role role = roleDao.findById(roleId).get();
        //2.构造角色的权限集合
        Set<Permission> perms = new HashSet<>();
        for (String permId : permIds) {
            Permission permission = permissionDao.findById(permId).get();
            //需要根据父id和类型查询API权限列表
            List<Permission> apiList =
permissionDao.findByTypeAndPid(PermissionConstants.PERMISSION_API, permission.getId());
            perms.addAll(apiList);//自定赋予API权限
            perms.add(permission);//当前菜单或按钮的权限
       }
        System.out.println(perms.size());
        //3.设置角色和权限的关系
        role.setPermissions(perms);
        //4.更新角色
        roleDao.save(role);
   }

3.3 前端代码实现

(1)在 \src\module-settings\components\role-list.vue 绑定权限按钮

<el-table-column fixed="right" label="操作" align="center" width="250">
   <template slot-scope="scope">
      <el-button @click="handlerPerm(scope.row)" type="text" size="small">分配权限</elbutton>
      <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</elbutton>
      <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</elbutton>
   </template>
</el-table-column>

(2)在 \src\api\base\role.js 中添加分配权限的API方法

export const assignPrem = data => createAPI(`/sys/role/assignPrem`, 'put', data)

(3) \src\module-settings\components\role-list.vue 使用Element-UI构造权限树

 <el-dialog :title="'为【'+formData.name+'】分配权限'" :visible.sync="permFormVisible"
style="hight:100px;line-height:1px">
      <el-tree
        :data="treeData"
        default-expand-all 
        show-checkbox
        node-key="id"
        ref="tree"
        :default-checked-keys="checkNodes"
        :props="{label:'name'}">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="permFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="assignPrem">确 定</el-button>
      </div>
    </el-dialog>

(4) 完成添加权限

import {list,add,update,remove,detail,assignPrem} from "@/api/base/role"
import * as permApi from "@/api/base/permissions"
import commonApi from "@/utils/common"
import PageTool from './../../components/page/page-tool'
var _this = null
export default {
  name: 'roleList',
  components: {PageTool},
  props: ['objId'],
  data() {
    return {
      formData:{},
      treeData:[],
      checkNodes:[],
      dialogFormVisible: false,
      permFormVisible:false,
      dataList:[],
      counts:0,
      requestParameters:{
        page: 1,
        pagesize: 10
     }    
   }
 },
  methods: {
    assignPrem() {
     
assignPrem({roleId:this.formData.id,ids:this.$refs.tree.getCheckedKeys()}).then(res =>
{
         
this.$message({message:res.data.message,type:res.data.success?"success":"error"});
          this.permFormVisible=false
     })
   },
    handlerPerm(obj) {
       detail({id:obj.id}).then(res=>{
         this.formData = res.data.data;
         if(this.formData.menusIds != null) {
            this.checkNodes = this.formData.menusIds.split(",")
         }
         if(this.formData.pointIds != null) {
          this.checkNodes.push(this.formData.pointIds.split(","))
         }
          permApi.list({type:0,pid:null}).then(res => {
            this.treeData = commonApi.transformTozTreeFormat(res.data.data)
            this.permFormVisible=true
         })
       })
   },
    handlerAdd() {
      this.formData={}
      this.dialogFormVisible = true
   },
    handleDelete(obj) {
      this.$confirm(
        `本次操作将删除${obj.name},删除后角色将不可恢复,您确认删除吗?`
     ).then(() => {
          remove({id: obj.id}).then(res => {
             
this.$message({message:res.data.message,type:res.data.success?"success":"error"});
              this.doQuery()
         })
     })
   },
    handleUpdate(obj) {
      detail({id:obj.id}).then(res=>{
        this.formData = res.data.data;
        this.formData.id = obj.id;
        this.dialogFormVisible = true
     })
   },
    saveOrUpdate() {
      if(this.formData.id == null || this.formData.id == undefined) {
          this.save()
     }else{
          this.update();
     }
   },
    update(){
      update(this.formData).then(res=>{
       
this.$message({message:res.data.message,type:res.data.success?"success":"error"});
        if(res.data.success){
          this.formData={};
          this.dialogFormVisible=false;
          this.doQuery();
       }
     })
   },
    save() {
      add(this.formData).then(res=>{
       
this.$message({message:res.data.message,type:res.data.success?"success":"error"});
        if(res.data.success){
          this.formData={};
          this.dialogFormVisible=false;
           this.doQuery();
       }
     })
   },
    // 获取详情
    doQuery() {
      list(this.requestParameters).then(res => {
          this.dataList = res.data.data.rows
          this.counts = res.data.data.total
       })
   },
    // 每页显示信息条数
    handleSizeChange(pageSize) {
      this.requestParameters.pagesize = pageSize
      if (this.requestParameters.page === 1) {
        _this.doQuery(this.requestParameters)
     }
   },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      _this.doQuery()
   },
 },
  // 挂载结束
  mounted: function() {},
  // 创建完毕状态
  created: function() {
    _this = this
    this.doQuery()
 },
  // 组件更新
  updated: function() {}
}</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端基础-JavaScript综合案例

    insertBefore、firstChild、getComputedStyle、appendChild、createElement、Math.random、M...

    cwl_java
  • 前端基础-JavaScript对象(Object)

    cwl_java
  • 商城项目-商品查询

    接下来,我们自己来实现一下,新建两个组件:MyGoods.vue和MyGoodsForm.vue

    cwl_java
  • 使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

    望月从良
  • Button按钮--inject与provide

    inject 和 provider 是vue中的组合选项,需要一起使用。目的是允许一个祖先组件向其所有子孙后代注入依赖(简单地说就是祖先组件向子孙后代传值的一种...

    用户1148399
  • Flutter Lesson 4: Flutter组件之App布局组件

    首先来看一下我怎么来学习Flutter,我要了解每一个组件,同时,这又是一个App,所以,我的目标是直接生产一个App,里面就是对Flutter组件的介绍,同时...

    踏浪
  • HTML5 canvas 粒子特效显示图像/文字

    本次实例将图片或文字分解成粒子。是先将图片或者文字画在canvas上,然后通过画布对象的getImageData获取到画布上的所有像素点,也就是imageDat...

    用户5997198
  • 实现红警式的建筑物拖拽生成特效

    望月从良
  • 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    这个简单的引擎里需要有三种元素:世界(World)、发射器(Launcher)、粒子(Grain)。总得来说就是:发射器存在于世界之中,发射器制造粒子,世界和发...

    Jation
  • iScroll学习小结

    前言 最近项目需要实现一个fixed标题栏的功能,很普通的功能,实现核心也是在sroll事件中切换到fixed状态即可,但是在某些版本ios的某些内核中,在惯性...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券