05-权限列表

最新推荐文章于 2022-05-31 15:43:12 发布
最新推荐文章于 2022-05-31 15:43:12 发布
阅读量305 收藏 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

诗乐舞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
harmonyos鸿蒙,鸿蒙HarmonyOS应用权限列表大全
weixin_34242698的博客
05-27 8121
HarmonyOS的应用权限严格按照权限分类分级模型进行定义，如图1所示，具体过程可分为三步：1、根据不同应用所需实现的功能，明确接口是否需要对外开放。2、根据接口所涉数据的敏感程度或所涉能力的安全威胁影响，对所有的开放接口进行分级(包括中、低、高、严重)。不对外开放的接口均为严重级别。3、根据不同的分级，确定权限的开放范围与授权方式。图1权限分类分级模型HarmonyOS已定义的权限列表详见《A...
权限管理(权限列表+角色列表)开发
我的博客
08-23 2105
目录 新建rights分支并且切换到这个分支 git checkout -b rights 权限管理业务分析 用户和不同的角色绑定，而不同角色拥有不同的权限（增删改查） 权限列表开发流程 权限列表的基本布局 通过发起一次请求获取权限列表数据，发起什么样的请求要查看API文档https://download.csdn.net/download/YINZHE__/21390085 将获取到的数据渲染成一个table表格，并做一定的美化 plugins/element.js comp...
Android权限列表
coolke wang的专栏
06-19 9482
Android所有权限 编　号 权限 说明 ００１ ACCESS_CHECKIN_PROPERTIES 允许读写访问”properties”表在checkin数据库中，改值可以修改上传 ００２ ACCESS_COARSE_LOCATION 允许一个程序访问CellID或WiFi热点来获取粗略的位置 ００３ ACCESS_FINE_LOCATION 允许一
Android权限申请哪些需要动态申请
chen969097157的博客
09-21 1万+
动态权限：这类权限在需要的时候，需要我们动态申请比如：当我们需要打开相机拍摄照片的时候需要我们通过代码的方式在需要的地方去申请权限。具体的权限分组情况如下表：group:android.permission-group.CONTACTS permission:android.permission.WRITE_CONTACTS permission:android.permission.GET_ACC
系统权限设计（五张表）
热门推荐
江小白不喝酒
10-30 1万+
大致用到５张表：三张主表，两张从表 主表：用户表（UserInfo）、角色表（RoleInfo）、菜单表（MenuInfo） 从表：用户角色表（UserRole）、角色菜单表（RoleMenu）。 　　各表的大体表结构如下： 　　１、用户表（UserInfo）：Id、UserName、UserPwd 　　２、角色表（RoleInfo）：Id、RoleName 　　３、菜单表（MenuI
【05-面向对象(下)】
07-03
如果形参列表中只有一个参数，甚至连形参列表的圆括号也可以省略。 　–箭头（->），必须通过英文等号和大于符号组成。 　–代码块。如果代码块只有包含一条语句，Lambda表达式允许省略代码块的花括号，如果省略了...
X-Scan v3.1
10-22
“攻击脚本列表” - 由于目前Scripts目录中的脚本数量已近2000个，在批量扫描中可以通过定制脚本列表，只选取高风险级别漏洞进行检测，以加快扫描速度。若需要选择所有脚本，应将该输入框清空。 “选择脚本” - ...
NPUSS-Tinder-SFT-0.1 软件功能列表1
08-08
本文档"NPUSSTinderSFT-0.1软件功能列表1"详细列出了该系统的主要功能，为开发团队提供了明确的开发指南。 1. **用户登录** - 用户登录是系统的基础功能，它包括了登录账户（A01）的实现。用户能够通过输入用户名和...
CMMI3访谈问题列表-for-CM.pdf
最新发布
08-15
CMMI3访谈问题列表-for-CM.pdf 本文档提供了CMMI3访谈问题列表，主要针对配置管理（CM）的问题，旨在评估项目中配置管理的成熟度。下面对每个问题进行详细解释： 1. 是否有独立的配置管理组？有组织级的配置管理员...
X-Cart Gold 4.5.4.zip
05-27
[*] 2012年9月27日，ABR - 改善（0126536）：增加了POSIX扩展到列表中的推荐的PHP扩展。 [！] 2012年10月22日的宗旨 - 错误（0127235）：清洁宣传静态页面的URL中缺少的演示数据。固定的。 [！] 2012年10月16日，...
应用列表以及权限列表
04-28
Android应用程序列表的获取，以及获取应用程序权限列表
危险权限，获取应用权限列表
u010015933的博客
08-08 4663
获取应用所需权限（只能获取在AndroidManifest.xml文件中声明的权限，像手机设置-》权限管理-》应用-》权限列表这个里面的权限并不是都能获取，比如读取应用列表的权限就获取不到） PackageInfo pkgInfo = packageManager.getPackageInfo(getPackageName(), PackageManager.GET_PERMISSIONS);...
ThinkPHP--RBAC展示权限列表信息-权限维护
u014796999的博客
09-26 1002
ThinkPHP--RBAC展示权限列表信息-权限维护
权限分配之权限的展示
weixin_30794499的博客
04-15 309
最后就是权限的展示了：对前面的 总结：　　1. 一级菜单列表，是我对 menu表的，增删改查。　　2. 二级菜单列表，是我对Permission表中， 可以作为二级菜单存在，如 客户列表、账单列表的 增删改查　　3. 最后的权限展示，就是对Permission表中， 不能作为二级菜单， 但是他的pid字段，关联着 二级菜单权限的，例如 添加客户，编辑，删除客户这些权限的增删改查。 查：...
权限展示-左侧列表动态化
m0_61464384的博客
05-31 214
1：改造登录接口 如果这个用户存在，那么就去看她身上有没有角色=>如果有id但是身上没有角色，我就把我在角色库里面查询到的你这个角色是什么，然后去赋值给你，然后如果是没有id的那就是超级管理员，所以，就进行让他可以看到所有角色列表。 2：改造下config的menuConfig菜单列表 isPublic:true//公开的，无论什么身份都可访问到首页 3：在Appnavbar的左侧列表组件中 创建hasAuth方法-根据你当前的这个用户角色，然后去生成你要展示出来的左侧权限列表都有什么
用户登陆后的显示权限列表
有脑子的搬砖工的博客
12-26 712
1.查找用户列表，并添加到当前session中 @Controller public class HomeController { @Autowired private SysUserService sysUserService; @RequestMapping({"/","/index"}) public String index(HttpServlet...
laravel权限模块之权限列表展示
你华还是你华
06-26 415
本文目录一、权限（结点）管理1.1 创建权限资源路由1.2 创建资源控制器（关联模型）1.3 权限列表 一、权限（结点）管理 1.1 创建权限资源路由 // 资源路由 权限管理 Route::resource('node', 'NodeController'); 1.2 创建资源控制器（关联模型） 创建资源控制器，并关联模型： php artisan make:controller Admin/NodeController -r -m Models/Node 可以看到这边都自动生成模型路由了，跟
jmu-java-03面向对象基础-05-覆盖
06-28
覆盖，又称重写或重载，是面向对象编程中的...- 方法名、参数列表、返回类型必须完全一致 - 方法的访问权限不能比父类中的方法更严格 - 方法的异常类型不能比父类中的方法更广 覆盖有助于提高代码的复用性和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值