05-权限列表

最新推荐文章于 2023-06-16 17:00:03 发布
最新推荐文章于 2023-06-16 17:00:03 发布
阅读量356 收藏 1
点赞数
分类专栏： Vue项目笔记 文章标签： vue 列表 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44173818/article/details/106987380
版权

权限列表

1 通过路由的形式展示权限列表
  1. 首先在components文件夹下新建power文件夹 新建Right和Role组件

步骤同新建用户列表的User组件

  1. 在路由文件中导入新建的两个权限列表组件 在home路由规则中添加子路由
 { path: '/home', component: Home,
    redirect: '/welcome',
    children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users },
      { path: '/rights', component: Rights },
      { path: '/roles', component: Roles }
    ] }
  1. 解决element-ui单一路由重复点击报错问题
// 解决重复点击某个路由报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
};

https://gitee.com/xuoctober/image/raw/master/Vue学习笔记图片/CmPFg2OHYZBj.png

2 权限列表之Rights组件
  1. 绘制Rights组件UI–面包屑导航+卡片视图+表单+标签
  2. 调用api获取数据
// 获取权限数据
      async getRightsList() {
        const {data: res} = await this.$http.get('rights/list');
        if (res.meta.status !== 200) {
            return this.$message.error('获取权限数据失败!');
        }
        // 为权限数据列表赋值
        this.rightsList = res.data;
      }
    }

在页面加载时立即调用

   created() {
      // 在页面加载的时候立即获取权限数据
      this.getRightsList();
   }
  1. 渲染Rights组件-三个if判断是哪一级的权限
<!--      面包屑导航-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
<!--      卡片视图-->
      <el-card>
        <el-table :data="rightsList" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="权限名称" prop="authName"></el-table-column>
          <el-table-column label="路径" prop="path"></el-table-column>
          <el-table-column label="权限等级" prop="level"></el-table-column>
          <el-table-column label="权限名称" prop="authName">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.level === '0'">一级权限</el-tag>
              <el-tag v-else-if="scope.row.level === '1'" type="success">二级权限</el-tag>
              <el-tag v-else type="warning">三级权限</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
3 权限列表之Roles组件
  1. 绘制Roles组件UI–面包屑导航+卡片视图+按钮+表单+对话框
  2. 获取并渲染角色列表数据
  • 首先在data中定义所有角色的数据列表 roleList
  • 调用api获取所有角色的数据列表
  // 获取角色列表信息
    async getRolesList() {
      const {data: res} = await this.$http.get('roles');
      if (res.meta.status !== 200) {
          return this.$message.error('获取角色列表信息失败!');
      }
      // 为角色信息列表赋值
      this.roleList = res.data;
      this.$message.success('获取角色列表信息成功!');
    }
  • 在页面加载时立即调用
  created() {
    this.getRolesList();
  }
  • 渲染角色数据
<!--        角色列表区域-->
        <el-table :data="roleList" border stripe>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="角色名称" prop="roleName"></el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="showEditRolesDialog(scope.row.id)" size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
              <el-button @click="removeRolesById(scope.row.id)" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              <el-button @click="showSetRightDialog(scope.row)" size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>

https://gitee.com/xuoctober/image/raw/master/Vue学习笔记图片/FfI2At4mWoZt.png

  • 渲染角色下权限

添加展开列和element标签组件通过三重for循环渲染权限标签 数据由作用域插槽获取

<!--          展开列-->
          <el-table-column label="展开" type="expand">
            <template slot-scope="scope">
              <el-row :class="['vcenter', 'bdbottom', i1 === 0 ? 'bdtop' : '']" v-for="(item1, i1) in scope.row.children" :key="item1.id">
<!--                渲染一级权限-->
                <el-col :span="5">
                  <el-tag closable @close="removeRightById(scope.row, item1.id)">{{item1.authName}}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
<!--                渲染二级和三级权限-->
                <el-col :span="19">
                  <el-row :class="['vcenter', i2 === 0 ? '' : 'bdtop']" v-for="(item2, i2) in item1.children" :key="item2.id">
<!--                    渲染二级权限-->
                    <el-col :span="6">
                      <el-tag closable @close="removeRightById(scope.row, item2.id)" type="success">{{item2.authName}}</el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
<!--                    渲染三级权限-->
                    <el-col :span="18">
                      <el-tag closable @close="removeRightById(scope.row, item3.id)" type="warning" v-for="(item3, i3) in item2.children" :key="item3.id">
                        {{item3.authName}}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>

https://gitee.com/xuoctober/image/raw/master/Vue学习笔记图片/z1ka!OHwpKEo.png

  • 删除角色下的权限

给每个权限添加removeRightById事件处理函数 将作用域插槽数据scope.row和权限id传进去

      // 根据id删除对应权限
    async removeRightById(role, rightId) {
        // 弹框询问是否删除权限
        const confirmResult = await this.$confirm('此操作将永久删除该角色权限,是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).catch(err => {
            return err;
        });
        if (confirmResult !== 'confirm') {
            return this.$message.info('您取消了删除操作');
        }
        const {data: res} = await this.$http.delete(`roles/${role.id}/rights/${rightId}`);
        if (res.meta.status !== 200) {
            return this.$message.error('权限删除失败!');
        }
        // this.getRolesList();
        role.children = res.data;
    }

https://gitee.com/xuoctober/image/raw/master/Vue学习笔记图片/oRkNX6SgJQqi.png
3. 增加、修改和删除角色

原理与User组件增加用户、修改用户和删除用户相同

增加角色对话框

<!--      添加角色对话框-->
      <el-dialog
        @close="addRolesDialogClosed"
        title="添加角色"
        :visible.sync="addRolesDialogVisible"
        width="50%">
        <!--        内容主题区域-->
        <el-form :model="addRolesForm" :rules="addRolesFormRules" ref="addRolesFormRef" label-width="80px">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="addRolesForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="addRolesForm.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addRolesDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRoles">确 定</el-button>
        </span>
      </el-dialog>

https://gitee.com/xuoctober/image/raw/master/Vue学习笔记图片/Abgds4KHxeYE.png
修改角色对话框

 <!--      修改角色对话框-->
      <el-dialog
        @close="editRolesDialogClosed"
        title="修改角色"
        :visible.sync="editRolesDialogVisible"
        width="50%">
        <!--        内容主题区域-->
        <el-form :model="editRolesForm" :rules="editRolesFormRules" ref="editRolesFormRef" label-width="80px">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="editRolesForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="editRolesForm.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editRolesDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editRolesInfo">确 定</el-button>
        </span>
      </el-dialog>

https://gitee.com/xuoctober/image/raw/master/Vue学习笔记图片/z1uA*detGIza.png
事件处理函数

增加角色

 // 添加角色列表
    addRoles() {
      // 表单预校验
      this.$refs.addRolesFormRef.validate(async valid => {
          if (!valid) return;
          // 通过预校验则发起请求
          const {data: res} = await this.$http.post('roles', this.addRolesForm);
          if (res.meta.status !== 201) {
              return this.$message.error('添加角色失败!');
          }
          // console.log(res.data);
          // 关闭添加用户对话框
          this.addRolesDialogVisible = false;
          // 重新获取角色列表信息
          this.getRolesList();
          this.$message.success('添加角色成功!');
      })
    }

修改角色

    editRolesInfo() {
        // 表单预校验
      this.$refs.editRolesFormRef.validate(async valid =>{
          if (!valid) return;
          // 通过预校验则发起请求
          const {data: res} = await this.$http.put('roles/' + this.editRolesForm.roleId, {
              roleName: this.editRolesForm.roleName,
              roleDesc: this.editRolesForm.roleDesc
          });
          if (res.meta.status !== 200) {
              return this.$message.error('修改角色信息失败!');
          }
          this.$message.success('修改角色信息成功!');
          // 修改成功关闭对话框
          this.editRolesDialogVisible = false;
          // 重新获取角色信息列表
          this.getRolesList();
      })
    }

删除角色

  async removeRolesById(id) {
        // 弹框询问是否删除角色
        const confirmResult = await this.$confirm('此操作将永久删除该角色,是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).catch(err => {
            return err;
        });
        // 如果用户确认删除 会返回confirm字符串
        // 如果用户取消删除 会返回cancel字符串
        if (confirmResult !== 'confirm') {
            return this.$message.info('您取消了删除操作');
        }
        const {data: res} = await this.$http.delete('roles/' + id);
        if (res.meta.status !== 200) {
            return this.$message.error('删除角色信息失败!');
        }
        this.$message.success('删除角色信息成功!');
        // 刷新角色列表
        this.getRolesList();
    }

https://gitee.com/xuoctober/image/raw/master/Vue学习笔记图片/cJgQ!GeXwTuC.png
监听添加角色对话框的关闭事件 重置表单

    // 监听添加角色对话框的关闭事件
    addRolesDialogClosed() {
      // 重置添加角色对话框表单
      this.$refs.addRolesFormRef.resetFields();
    }

监听修改角色对话框的关闭事件 重置表单

    editRolesDialogClosed() {
      // 重置修改角色对话框表单
      this.$refs.editRolesFormRef.resetFields();
    }

添加用户的验证规则

 // 添加角色数据表单的验证规则
          addRolesFormRules: {
              roleName: [
                  { required: true, message: '请输入角色名称', trigger: 'blur' }
              ],
              roleDesc: [
                  { required: true, message: '请输入角色描述', trigger: 'blur' }
              ]
          }
  1. 分配角色权限(按需导入树形控件)

分配角色权限的对话框和树形控件

<!--      分配权限的对话框-->
      <el-dialog
        @close="setRightDialogClosed"
        title="分配权限"
        :visible.sync="setRightDialogVisible"
        width="50%">
<!--        树形控件-->
        <el-tree ref="treeRef" default-expand-all :default-checked-keys="defKeys" node-key="id" show-checkbox :data="rightsList" :props="treeProps"></el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setRightDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="allotRights">确 定</el-button>
        </span>
      </el-dialog>

其中树形控件绑定的数据rightsList在data中定义

在打开对话框的时候调用事件处理函数为其赋值

   // 展示分配权限的对话框
    async showSetRightDialog(role) {
      // 为将要分配权限的角色id赋值
      this.roleId = role.id;
      // 获取树形权限列表
      const {data: res} = await this.$http.get('rights/tree');
      if (res.meta.status !== 200) {
          return this.$message.error('获取权限树失败!');
      }
      this.rightsList = res.data;
      this.getLeafKeys(role, this.defKeys);
      // 打开对话框
      this.setRightDialogVisible = true;
    }

打开对话框的时候要获取那些权限是已有的

判断当前节点是否有children属性 如果没有 说明是三级权限 追加至三级权限数组中

// 通过递归的形式获取角色下所有三级权限的id 并保存到defKeys中
    getLeafKeys(node, arr) {
        // 如果当前node节点中没有children属性 则说明是第三级的权限 保存到数组中去 最后为defKeys赋值
        if (!node.children) {
            return arr.push(node.id);
        }
        // 如果有children属性则递归调用本函数 将三级权限的id保存到数组中
        node.children.forEach(item => {
            this.getLeafKeys(item, arr)
        });
    }

在点击对话框的确定按钮时发起分配角色权限的请求

 // 分配权限
    async allotRights() {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ];
      // 将数组转为以，分割
      const idStr = keys.join(',');
      const {data: res} = await this.$http.post(`roles/${this.roleId}/rights`, {
          rids: idStr
      });
      if (res.meta.status !== 200) {
          return this.$message.error('分配权限失败!');
      }
      this.$message.success('分配权限成功!');
      this.getRolesList();
        // 关闭对话框
      this.setRightDialogVisible = false;
    }

https://gitee.com/xuoctober/image/raw/master/Vue学习笔记图片/RUEti^AC*I5c.png

应用列表以及权限列表
04-28
Android应用程序列表的获取，以及获取应用程序权限列表
backup-USR-G800-2017-05-03
10-09
在Linux或Unix系统中，“etc”目录通常包含了系统配置文件，如网络设置、用户权限、服务启动脚本等。因此，我们可以推断这个备份可能包含了USR-G800设备的配置信息。恢复这些文件可以帮助快速重新配置设备，或者在...
权限列表
像风一样自由
06-17 412
普通权限BLUETOOTH_ADMIN BROADCAST_STICKY CHANGE_NETWORK_STATE CHANGE_WIFI_MULTICAST_STATE CHANGE_WIFI_STATE DISABLE_KEYGUARD EXPAND_STATUS_BAR GET_PACKAGE_SIZE INSTALL_SHORTCUT INTERNET KILL_BACKGROUND_PRO
用户权限列表
weixin_34055910的博客
11-05 401
####1.权限列表的定义####指定特殊用户对某个文件有特殊权限的记录表格####2.权限列表的识别####-rw-rw-r--+ 1 root root 12 Oct 29 21:20 file##权限位有加号权限列表开启-rw-r--r--. 1 root root 0 Oct 29 21:22 westos##权限位是.权限列表未激活####3.权限列表的查看...
W05-web网安啊啊啊啊啊啊
最新发布
10-16
【压缩包子文件的文件名称列表】：W05-web安全基础2-23.10.19 在网络安全领域，Web安全是至关重要的一环，特别是对于运维人员来说，理解和掌握Web安全的基本概念、威胁以及防护措施是日常工作中的必要技能。以下是...
gacsdk_2.1.1-build-34_2019-05-24.zip
08-31
【标题】"gacsdk_2.1.1-build-34_2019-05-24.zip" 是一个游戏音频接触（Game Audio Contact）开发包的压缩文件，版本为2.1.1，构建号为34，发布日期为2019年5月24日。这个SDK主要用于游戏开发中的音频处理和交互。 ...
ThinkPHP--RBAC展示权限列表信息-权限维护
u014796999的博客
09-26 1027
ThinkPHP--RBAC展示权限列表信息-权限维护
linux 权限列表,权限列表（linux）
weixin_39867296的博客
04-30 82
什么时权限列表对与文件的权限进行附加补充说名的一个权限设定方式如何查看权限列表[root@aclhost mnt]# ls -l file-rw-rw-r-- 1 root root 0 Nov7 09:14 file如果此位为“.”,代表这位上没有权限列表如果此位为“+”,代表权限列表存在[root@aclhost mnt]# getfacl file# file: file #...
权限管理(权限列表+角色列表)开发
我的博客
08-23 2218
目录 新建rights分支并且切换到这个分支 git checkout -b rights 权限管理业务分析 用户和不同的角色绑定，而不同角色拥有不同的权限（增删改查） 权限列表开发流程 权限列表的基本布局 通过发起一次请求获取权限列表数据，发起什么样的请求要查看API文档https://download.csdn.net/download/YINZHE__/21390085 将获取到的数据渲染成一个table表格，并做一定的美化 plugins/element.js comp...
十、权限列表
sunnnnh的博客
03-23 221
目录 （1）通过路由展示权限列表组件 （2）绘制面包屑导航和卡片视图 （3）调用API获取权限列表的数据（type=list） （4）渲染权限列表UI结构 （5）用户、角色、权限三者之间的关系 （1）通过路由展示权限列表组件 1. 首先创建权限列表所对应的组件Rights.vue 2. 添加路由 （2）绘制面包屑导航和卡片视图 （3）调用API获取权限列表的数据（type=list） 1. 首先定义数组rightsList用来存放权限列表...
Android权限列表（基于Android 14）
热门推荐
DL-ZhangTeng的博客
06-16 1万+
权限的目的为了保护用户隐私，应用在访问一些敏感数据时，必须事先取得用户授权后才能使用，比如：比如读取sdcard、访问通讯录等。在Android6.0之前的设备上，系统不会提醒用户正在获取的权限。一旦安装应用，就意味着该应用所需的所有权限均已经得到授权。在这种情况下应用可以自由收集用户隐私信息。或者随意发送短信。为了解决这个问题在Android6.0之后的设备上，应用需要动态授权，当需要使用某个权限时，会弹出一个提醒框来征求用户意见，只有取得用户同意后才能继续使用。
用户登陆后的显示权限列表
有脑子的搬砖工的博客
12-26 761
1.查找用户列表，并添加到当前session中 @Controller public class HomeController { @Autowired private SysUserService sysUserService; @RequestMapping({"/","/index"}) public String index(HttpServlet...
【权限管理】【权限列表的移动】
Armo的博客
01-10 732
背景 在给角色配置权限时候,会涉及到权限列表的移动. 注意点: 如何传递未有的权限到jsp 提交表单:如何将权限列表注入角色的属性. 提交表单:如何对拥有的权限select列表的全部选择后再提交 若使用paramsPrepareParamsStack拦截器,会注入两次权限列表,所以要在prepareSave方法中role.getPermissions().clear(); 传递
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>