vue3-实战-11-管理后台-权限管理之角色管理模块

这篇具有很好参考价值的文章主要介绍了vue3-实战-11-管理后台-权限管理之角色管理模块。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1-角色列表

1.1-原型需求分析

1.2-接口封装和数据类型定义

1.3-请求服务器端获取列表页面数据

1.4-组件页面动态渲染数据

2-角色新增和编辑

2.1-需求原型分析

2.2-页面结构以及功能实现

3-角色的删除

4-分配权限

4.1-原型需求分析

4.2-获取服务器数据渲染数据

4.3-分配权限


1-角色列表

1.1-原型需求分析

vue3-实战-11-管理后台-权限管理之角色管理模块

       页面布局结构和上一节用户管理列表页面类似,上部分是el-card里面有个行内的表单el-form :inline="true";一个搜索输入框,两个按钮。下部分是一个el-card里面有个按钮和el-table组件。操作列有三个按钮组件。最下面是一个分页el-pagination组件。所以列表页面就请求服务器端一个接口,角色列表接口。

1.2-接口封装和数据类型定义

      本节我们就把此模块需要用到的接口全部封装,后续章节就不用重复编写接口和数据类型的定义了。

文件src\api\acl\role\index.ts定义此模块需要用到的接口信息

//角色管理模块的的接口
import request from '@/utils/request'
import type { RoleResponseData, RoleData, MenuResponseData } from './type'
//枚举地址
enum API {
  ALLROLE_URL = '/admin/acl/role/',//获取全部的职位接口
  ADDROLE_URL = '/admin/acl/role/save',//新增岗位的接口地址
  UPDATEROLE_URL = '/admin/acl/role/update',//更新已有的职位
  ALLPERMISSTION = '/admin/acl/permission/toAssign/',//获取全部的菜单与按钮的数据
  SETPERMISTION_URL = '/admin/acl/permission/doAssign/?',//给相应的职位分配权限
  REMOVEROLE_URL = '/admin/acl/role/remove/',//删除已有的职位
}
//获取全部的角色
export const reqAllRoleList = (page: number, limit: number, roleName: string) =>
  request.get<any, RoleResponseData>(
    API.ALLROLE_URL + `${page}/${limit}/?roleName=${roleName}`,
  )
//添加职位与更新已有职位接口
export const reqAddOrUpdateRole = (data: RoleData) => {
  if (data.id) {
    return request.put<any, any>(API.UPDATEROLE_URL, data)
  } else {
    return request.post<any, any>(API.ADDROLE_URL, data)
  }
}

//获取全部菜单与按钮权限数据
export const reqAllMenuList = (roleId: number) =>
  request.get<any, MenuResponseData>(API.ALLPERMISSTION + roleId)
//给相应的职位下发权限
export const reqSetPermisstion = (roleId: number, permissionId: number[]) =>
  request.post(
    API.SETPERMISTION_URL + `roleId=${roleId}&permissionId=${permissionId}`,
  )
//删除已有的职位
export const reqRemoveRole = (roleId: number) =>
  request.delete<any, any>(API.REMOVEROLE_URL + roleId)

文件src\api\acl\role\type.ts定义接口请求响应的数据类型

export interface ResponseData {
  code: number
  message: string
  ok: boolean
}
//职位数据类型
export interface RoleData {
  id?: number
  createTime?: string
  updateTime?: string
  roleName: string
  remark?: null
}

//全部职位的数组的ts类型
export type Records = RoleData[]
//全部职位数据的相应的ts类型
export interface RoleResponseData extends ResponseData {
  data: {
    records: Records
    total: number
    size: number
    current: number
    orders: []
    optimizeCountSql: boolean
    hitCount: boolean
    countId: null
    maxLimit: null
    searchCount: boolean
    pages: number
  }
}

//菜单与按钮数据的ts类型
export interface MunuData {
  id: number
  createTime: string
  updateTime: string
  pid: number
  name: string
  code: string
  toCode: string
  type: number
  status: null
  level: number
  children?: MenuList
  select: boolean
}
export type MenuList = MunuData[]

//菜单权限与按钮权限数据的ts类型
export interface MenuResponseData extends ResponseData {
  data: MenuList
}

1.3-请求服务器端获取列表页面数据

       在组件页面加载后,我们需要调用角色列表接口获取数据,搜索框输入关键字我们收集到关键字也需要获取数据,页码和页大小发生变化的时候我们同样需要调用接口重新获取列表数据。

import { ref, onMounted, reactive, nextTick } from 'vue';
//请求方法
import { reqRemoveRole, reqAllRoleList, reqAddOrUpdateRole, reqAllMenuList, reqSetPermisstion } from '@/api/acl/role';
import type { RoleResponseData, Records, RoleData, MenuResponseData, MenuList } from '@/api/acl/role/type'
//引入骨架的仓库
import useLayOutSettingStore from '@/store/modules/setting';
import { ElMessage } from 'element-plus';

let pageNo = ref<number>(1);//当前页码
let pageSize = ref<number>(5);//一页展示几条数据
let keyword = ref<string>('');//搜索职位关键字
let allRole = ref<Records>([]);//存储全部已有的职位
let total = ref<number>(0);//职位总个数

//组件挂载完毕
onMounted(() => {
    //获取职位请求
    getHasRole();
});

//获取全部用户信息的方法|分页器当前页码发生变化的回调
const getHasRole = async (pager = 1) => {
    //修改当前页码
    pageNo.value = pager;
    let result: RoleResponseData = await reqAllRoleList(pageNo.value, pageSize.value, keyword.value);
    if (result.code == 200) {
        total.value = result.data.total;
        allRole.value = result.data.records;
    }
}
//下拉菜单的回调
const sizeChange = () => {
    getHasRole();
}

当我们搜索框输入内容后,我们收集搜索关键字进行搜索。ps:请求接口后,可以优化不清空关键字(当然看个人项目的实际要求,个人认为展示关键字,可以让用户直观看到自己是按照什么关键字搜索的),点击重置才清空关键字

vue3-实战-11-管理后台-权限管理之角色管理模块

//搜索按钮的回调
const search = () => {
    //再次发请求根据关键字
    getHasRole();
    keyword.value = '';
}

当我们点击重置按钮的时候,重新刷新

vue3-实战-11-管理后台-权限管理之角色管理模块

//引入骨架的仓库
import useLayOutSettingStore from '@/store/modules/setting';

//重置按钮的回调
const reset = () => {
    settingStore.refsh = !settingStore.refsh;
}

1.4-组件页面动态渲染数据

当我们列表页面数据的时候,需要在el-card中展示数据。

vue3-实战-11-管理后台-权限管理之角色管理模块

2-角色新增和编辑

2.1-需求原型分析

vue3-实战-11-管理后台-权限管理之角色管理模块

 vue3-实战-11-管理后台-权限管理之角色管理模块

       点击新增或者编辑都弹出dialog对话框,使用el-dialog组件,里面使用el-form表单组件,只有一个表单元素el-form-item;新增和编辑的标题不一样,根据是否有id值判断。表单元素输入框需要校验。点击保存提交数据,点击取消,隐藏dialog对话框。

2.2-页面结构以及功能实现

页面结构如下:

vue3-实战-11-管理后台-权限管理之角色管理模块

校验规则


//自定义校验规则的回调
const validatorRoleName = (rule: any, value: any, callBack: any) => {
    if (value.trim().length >= 2) {
        callBack();
    } else {
        callBack(new Error('职位名称至少两位'))
    }
}
//角色校验规则
const rules = {
    roleName: [
        { required: true, trigger: 'blur', validator: validatorRoleName }
    ]
}

点击新增按钮逻辑

vue3-实战-11-管理后台-权限管理之角色管理模块

//控制对话框的显示与隐藏
let dialogVisite = ref<boolean>(false);

//获取form组件实例
let form = ref<any>();

//添加职位按钮的回调
const addRole = () => {
    //对话框显示出来
    dialogVisite.value = true;
    //清空数据
    Object.assign(RoleParams, {roleName: '',id: 0});
    //清空上一次表单校验错误结果
    nextTick(() => {
        form.value.clearValidate('roleName');
    })
}

点击编辑按钮逻辑

vue3-实战-11-管理后台-权限管理之角色管理模块

//收集新增岗位数据
let RoleParams = reactive<RoleData>({
    roleName: ''
})

//更新已有的职位按钮的回调
const updateRole = (row: RoleData) => {
    //显示出对话框
    dialogVisite.value = true;
    //存储已有的职位----带有ID的
    Object.assign(RoleParams, row);
    //清空上一次表单校验错误结果
    nextTick(() => {
        form.value.clearValidate('roleName');
    })
}

点击保存按钮,首先需要先通过校验规则,校验规则通过再提交数据给服务端。

vue3-实战-11-管理后台-权限管理之角色管理模块

点击取消按钮,直接隐藏掉dialog对话框

vue3-实战-11-管理后台-权限管理之角色管理模块

3-角色的删除

       点击删除操作按钮时,需要弹框提示用户,用户点击确定后,提交数据给服务器。如果当前页数据大于1,停留在当前页,小于1,请求上一页的数据。

vue3-实战-11-管理后台-权限管理之角色管理模块

//删除已有的职位
const removeRole = async (id: number) => {
    let result: any = await reqRemoveRole(id);
    if (result.code == 200) {
        //提示信息
        ElMessage({ type: 'success', message: '删除成功' });
        getHasRole(allRole.value.length > 1 ? pageNo.value : pageNo.value - 1);
    }
}

4-分配权限

4.1-原型需求分析

vue3-实战-11-管理后台-权限管理之角色管理模块

       点击某一个角色的分配权限按钮,需要查询当前角色的已有权限数据和全部的权限数据,服务端接口,目前服务端是全部返回,在每个权限里面有个标记字段select字段,字段为true表示当前角色有该权限。然后需要过滤出该角色拥有的权限,使用el-tree组件来实现上图效果。

4.2-获取服务器数据渲染数据

请求服务端获取数据,获取全部权限,然后过滤出当前角色拥有的权限,过滤过程中,需要递归过滤,存放level=4的数据就行,目前系统第四级的是按钮权限。

vue3-实战-11-管理后台-权限管理之角色管理模块

//准备一个数组:数组用于存储勾选的节点的ID(四级的)
let selectArr = ref<number[]>([]);
//定义数组存储用户权限的数据
let menuArr = ref<MenuList>([]);
//获取tree组件实例
let tree = ref<any>();
let drawer = ref<boolean>(false);//控制抽屉显示与隐藏

//分配权限按钮的回调
//已有的职位的数据
const setPermisstion = async (row: RoleData) => {
    //抽屉显示出来
    drawer.value = true;
    //收集当前要分类权限的职位的数据
    Object.assign(RoleParams, row);
    //根据职位获取权限的数据
    let result: MenuResponseData = await reqAllMenuList((RoleParams.id as number));
    if (result.code == 200) {
        menuArr.value = result.data;
        selectArr.value = filterSelectArr(menuArr.value, []);
    }
}

const filterSelectArr = (allData: any, initArr: any) => {
    allData.forEach((item: any) => {
        if (item.select && item.level == 4) {
            initArr.push(item.id);
        }
        if (item.children && item.children.length > 0) {
            filterSelectArr(item.children, initArr);
        }
    })

    return initArr;
}

el-tree组件中渲染数据:

vue3-实战-11-管理后台-权限管理之角色管理模块

4.3-分配权限

       当我们点击确定的时候,我们需要收集选中的节点数据id,传递给服务器。在el-tree插件中,我们有api获取选中的节点id和半选的节点id。我们合并两个数组,将数组传递给服务器端。点击取消按钮,直接隐藏当前抽屉就行。

vue3-实战-11-管理后台-权限管理之角色管理模块文章来源地址https://www.toymoban.com/news/detail-494242.html

//抽屉确定按钮的回调
const handler = async () => {  
    const roleId = (RoleParams.id as number);//职位的ID  
    let arr = tree.value.getCheckedKeys();//选中节点的ID
    let arr1 = tree.value.getHalfCheckedKeys(); //半选的ID
    let permissionId = arr.concat(arr1);
    //下发权限
    let result: any = await reqSetPermisstion(roleId, permissionId);
    if (result.code == 200) {      
        drawer.value = false;//抽屉关闭      
        ElMessage({ type: 'success', message: '分配权限成功' });//提示信息      
        window.location.reload();//页面刷新
    }
}

到了这里,关于vue3-实战-11-管理后台-权限管理之角色管理模块的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台

    书接上回,上一篇文章介绍了一个基于 Vue3 和 ElementPlus 的联系人列表管理后台小 demo (Vue3 + ElementPlus实战学习——模拟简单的联系人列表管理后台),在有了上一篇文章的基础上,我们试着用 axios 来获取数据,而不是用写死的数据,然后用 Node.js + Vue3 + ElementPlus 来实现联系

    2024年02月10日
    浏览(60)
  • axios实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台

    书接上回,上一篇文章介绍了一个基于 Vue3 和 ElementPlus 的联系人列表管理后台小 demo (Vue3 + ElementPlus实战学习——模拟简单的联系人列表管理后台),在有了上一篇文章的基础上,我们试着用 axios 来获取数据,而不是用写死的数据,然后用 Node.js + Vue3 + ElementPlus 来实现联系

    2024年02月09日
    浏览(83)
  • (vue权限管理)前端路由表角色权限管理,通过登录不同角色侧边栏显示对应页面

    1. 首先在src/router/index.js中添加路由表,其中constantRoutes 设置的为所有角色可见的路由,asyncRouterMap为对应权限人员可见路由,demo路由表代码如下: 2.在src/api/user.js中创建用户登录,获取用户信息,以及登出的接口 3.在store/modules/user.js文件,添加获取角色权限role的信息 4.在src

    2024年02月11日
    浏览(43)
  • 前端Vue:权限管理,给角色分配权限

    👉前端-Vue权限控制,菜单权限,按钮权限_一人创客的博客-CSDN博客 目录 介绍: 前端权限的概念: 前端权限的意义: Vue权限管理的代码实现: 菜单 刷新界⾯菜单消失 标识⽤户名, ⽅便查看当前⽤户 退出登陆:  界面: 1.判断当前是否登陆 2.控制是否可以访问角色界面 (

    2024年02月11日
    浏览(38)
  • axios 实战进阶练习( axios 封装篇)——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台的 axios 封装实战

    在之前的文章 axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台 中,我们完成了这个 基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台 的项目,其中项目的后端接口是用 Node.js 编写的,通过 axios 来获取接口,所以这篇文章我们来对这个 axi

    2024年02月11日
    浏览(104)
  • Vue+Element UI 权限管理(角色 )

    用户前台登录后,后台返回一个token,将该token存储到store中,并设置到header中,每次发起请求时都会携带该token,用于后台进行权限校验 在store 的user.js中定义了该方法 此时登录成功后,后台将返回一个token 在请求拦截器中将token添加到请求头上,在响应拦截器中设置未登录状

    2024年02月12日
    浏览(46)
  • 手机无法访问”xxx”目录(Android 11及以上授予文件管理权限)的解决方法

    Android11改变了此前安卓系统对文件管理的规则,在Android11上,文件读写变成了特殊权限。应用默认只能读写自己的目录/android/data/包名,这就导致我们想修改某个文件里的内容,结果却没有读写权限。本文主要提供一种解决方法——root+adb。 进入adb+ROOT权限开启 我们进入 adb s

    2024年02月16日
    浏览(62)
  • vue3后台管理系统

    后面可参考下: vue系列(三)——手把手教你搭建一个vue3管理后台基础模板 TypeError: Failed to fetch dynamically imported module: 以下代码项目gitee地址 初始化项目 可参考:vite官网 https://vitejs.cn/guide/#scaffolding-your-first-vite-project 添加加载效果 在index.html中的id为app中,写入 配置 vite.c

    2023年04月15日
    浏览(50)
  • DRF ~ day11 之 基于角色的访问控制、django的权限演示、权限控制、simple-ui的使用、django-vue-admin演示

    概念 RBAC 是基于角色的访问控制(Role-Based Access Control )在 RBAC 中,权限与角色相关联,用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。这样管理都是层级相互依赖的,权限赋予给角色,而把角色又赋予用户,这样的权限设计很清楚,管

    2024年01月19日
    浏览(37)
  • vue3+element-plus的后台管理系统模板 和 vue3+ant-design-vue的后台管理系统模板

    规范 :后台系统模板,按照企业级别的规范搭建的。 权限控制 :通过后端返回的路由表(这个路由表是由前端这边在系统配好的然后存储在后端的)来动态渲染菜单和注册路由,同时也根据页面内的接口权限对页面中的按钮做了是否可见的设置。前端这边有 路由、角色、用

    2024年02月08日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包