vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

這篇具有很好參考價值的文章主要介紹了vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1-角色列表

1.1-原型需求分析

1.2-接口封裝和數(shù)據(jù)類型定義

1.3-請求服務(wù)器端獲取列表頁面數(shù)據(jù)

1.4-組件頁面動態(tài)渲染數(shù)據(jù)

2-角色新增和編輯

2.1-需求原型分析

2.2-頁面結(jié)構(gòu)以及功能實現(xiàn)

3-角色的刪除

4-分配權(quán)限

4.1-原型需求分析

4.2-獲取服務(wù)器數(shù)據(jù)渲染數(shù)據(jù)

4.3-分配權(quán)限

1-角色列表

1.1-原型需求分析

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

? ? ? ?頁面布局結(jié)構(gòu)和上一節(jié)用戶管理列表頁面類似，上部分是el-card里面有個行內(nèi)的表單el-form :inline="true"；一個搜索輸入框，兩個按鈕。下部分是一個el-card里面有個按鈕和el-table組件。操作列有三個按鈕組件。最下面是一個分頁el-pagination組件。所以列表頁面就請求服務(wù)器端一個接口，角色列表接口。

1.2-接口封裝和數(shù)據(jù)類型定義

? ? ? 本節(jié)我們就把此模塊需要用到的接口全部封裝，后續(xù)章節(jié)就不用重復(fù)編寫接口和數(shù)據(jù)類型的定義了。

文件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/',//獲取全部的菜單與按鈕的數(shù)據(jù)
  SETPERMISTION_URL = '/admin/acl/permission/doAssign/?',//給相應(yīng)的職位分配權(quán)限
  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)
  }
}

//獲取全部菜單與按鈕權(quán)限數(shù)據(jù)
export const reqAllMenuList = (roleId: number) =>
  request.get<any, MenuResponseData>(API.ALLPERMISSTION + roleId)
//給相應(yīng)的職位下發(fā)權(quán)限
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定義接口請求響應(yīng)的數(shù)據(jù)類型

export interface ResponseData {
  code: number
  message: string
  ok: boolean
}
//職位數(shù)據(jù)類型
export interface RoleData {
  id?: number
  createTime?: string
  updateTime?: string
  roleName: string
  remark?: null
}

//全部職位的數(shù)組的ts類型
export type Records = RoleData[]
//全部職位數(shù)據(jù)的相應(yīng)的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
  }
}

//菜單與按鈕數(shù)據(jù)的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[]

//菜單權(quán)限與按鈕權(quán)限數(shù)據(jù)的ts類型
export interface MenuResponseData extends ResponseData {
  data: MenuList
}

1.3-請求服務(wù)器端獲取列表頁面數(shù)據(jù)

? ? ? ?在組件頁面加載后，我們需要調(diào)用角色列表接口獲取數(shù)據(jù)，搜索框輸入關(guān)鍵字我們收集到關(guān)鍵字也需要獲取數(shù)據(jù)，頁碼和頁大小發(fā)生變化的時候我們同樣需要調(diào)用接口重新獲取列表數(shù)據(jù)。

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);//當(dāng)前頁碼
let pageSize = ref<number>(5);//一頁展示幾條數(shù)據(jù)
let keyword = ref<string>('');//搜索職位關(guān)鍵字
let allRole = ref<Records>([]);//存儲全部已有的職位
let total = ref<number>(0);//職位總個數(shù)

//組件掛載完畢
onMounted(() => {
    //獲取職位請求
    getHasRole();
});

//獲取全部用戶信息的方法|分頁器當(dāng)前頁碼發(fā)生變化的回調(diào)
const getHasRole = async (pager = 1) => {
    //修改當(dāng)前頁碼
    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;
    }
}
//下拉菜單的回調(diào)
const sizeChange = () => {
    getHasRole();
}

當(dāng)我們搜索框輸入內(nèi)容后，我們收集搜索關(guān)鍵字進(jìn)行搜索。ps:請求接口后，可以優(yōu)化不清空關(guān)鍵字（當(dāng)然看個人項目的實際要求，個人認(rèn)為展示關(guān)鍵字，可以讓用戶直觀看到自己是按照什么關(guān)鍵字搜索的），點擊重置才清空關(guān)鍵字。

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

//搜索按鈕的回調(diào)
const search = () => {
    //再次發(fā)請求根據(jù)關(guān)鍵字
    getHasRole();
    keyword.value = '';
}

當(dāng)我們點擊重置按鈕的時候，重新刷新

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

//引入骨架的倉庫
import useLayOutSettingStore from '@/store/modules/setting';

//重置按鈕的回調(diào)
const reset = () => {
    settingStore.refsh = !settingStore.refsh;
}

1.4-組件頁面動態(tài)渲染數(shù)據(jù)

當(dāng)我們列表頁面數(shù)據(jù)的時候，需要在el-card中展示數(shù)據(jù)。

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

2-角色新增和編輯

2.1-需求原型分析

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

? vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

? ? ? ?點擊新增或者編輯都彈出dialog對話框，使用el-dialog組件，里面使用el-form表單組件，只有一個表單元素el-form-item；新增和編輯的標(biāo)題不一樣，根據(jù)是否有id值判斷。表單元素輸入框需要校驗。點擊保存提交數(shù)據(jù)，點擊取消，隱藏dialog對話框。

2.2-頁面結(jié)構(gòu)以及功能實現(xiàn)

頁面結(jié)構(gòu)如下：

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

校驗規(guī)則


//自定義校驗規(guī)則的回調(diào)
const validatorRoleName = (rule: any, value: any, callBack: any) => {
    if (value.trim().length >= 2) {
        callBack();
    } else {
        callBack(new Error('職位名稱至少兩位'))
    }
}
//角色校驗規(guī)則
const rules = {
    roleName: [
        { required: true, trigger: 'blur', validator: validatorRoleName }
    ]
}

點擊新增按鈕邏輯

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

//控制對話框的顯示與隱藏
let dialogVisite = ref<boolean>(false);

//獲取form組件實例
let form = ref<any>();

//添加職位按鈕的回調(diào)
const addRole = () => {
    //對話框顯示出來
    dialogVisite.value = true;
    //清空數(shù)據(jù)
    Object.assign(RoleParams, {roleName: '',id: 0});
    //清空上一次表單校驗錯誤結(jié)果
    nextTick(() => {
        form.value.clearValidate('roleName');
    })
}

點擊編輯按鈕邏輯

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

//收集新增崗位數(shù)據(jù)
let RoleParams = reactive<RoleData>({
    roleName: ''
})

//更新已有的職位按鈕的回調(diào)
const updateRole = (row: RoleData) => {
    //顯示出對話框
    dialogVisite.value = true;
    //存儲已有的職位----帶有ID的
    Object.assign(RoleParams, row);
    //清空上一次表單校驗錯誤結(jié)果
    nextTick(() => {
        form.value.clearValidate('roleName');
    })
}

點擊保存按鈕，首先需要先通過校驗規(guī)則，校驗規(guī)則通過再提交數(shù)據(jù)給服務(wù)端。

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

點擊取消按鈕，直接隱藏掉dialog對話框，

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

3-角色的刪除

? ? ? ?點擊刪除操作按鈕時，需要彈框提示用戶，用戶點擊確定后，提交數(shù)據(jù)給服務(wù)器。如果當(dāng)前頁數(shù)據(jù)大于1，停留在當(dāng)前頁，小于1，請求上一頁的數(shù)據(jù)。

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

//刪除已有的職位
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-分配權(quán)限

4.1-原型需求分析

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

? ? ? ?點擊某一個角色的分配權(quán)限按鈕，需要查詢當(dāng)前角色的已有權(quán)限數(shù)據(jù)和全部的權(quán)限數(shù)據(jù)，服務(wù)端接口，目前服務(wù)端是全部返回，在每個權(quán)限里面有個標(biāo)記字段select字段，字段為true表示當(dāng)前角色有該權(quán)限。然后需要過濾出該角色擁有的權(quán)限，使用el-tree組件來實現(xiàn)上圖效果。

4.2-獲取服務(wù)器數(shù)據(jù)渲染數(shù)據(jù)

請求服務(wù)端獲取數(shù)據(jù)，獲取全部權(quán)限，然后過濾出當(dāng)前角色擁有的權(quán)限，過濾過程中，需要遞歸過濾，存放level=4的數(shù)據(jù)就行，目前系統(tǒng)第四級的是按鈕權(quán)限。

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

//準(zhǔn)備一個數(shù)組:數(shù)組用于存儲勾選的節(jié)點的ID(四級的)
let selectArr = ref<number[]>([]);
//定義數(shù)組存儲用戶權(quán)限的數(shù)據(jù)
let menuArr = ref<MenuList>([]);
//獲取tree組件實例
let tree = ref<any>();
let drawer = ref<boolean>(false);//控制抽屜顯示與隱藏

//分配權(quán)限按鈕的回調(diào)
//已有的職位的數(shù)據(jù)
const setPermisstion = async (row: RoleData) => {
    //抽屜顯示出來
    drawer.value = true;
    //收集當(dāng)前要分類權(quán)限的職位的數(shù)據(jù)
    Object.assign(RoleParams, row);
    //根據(jù)職位獲取權(quán)限的數(shù)據(jù)
    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組件中渲染數(shù)據(jù)：

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊

4.3-分配權(quán)限

? ? ? ?當(dāng)我們點擊確定的時候，我們需要收集選中的節(jié)點數(shù)據(jù)id，傳遞給服務(wù)器。在el-tree插件中，我們有api獲取選中的節(jié)點id和半選的節(jié)點id。我們合并兩個數(shù)組，將數(shù)組傳遞給服務(wù)器端。點擊取消按鈕，直接隱藏當(dāng)前抽屜就行。

vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊文章來源地址http://www.zghlxwxcb.cn/news/detail-494242.html

//抽屜確定按鈕的回調(diào)
const handler = async () => {  
    const roleId = (RoleParams.id as number);//職位的ID  
    let arr = tree.value.getCheckedKeys();//選中節(jié)點的ID
    let arr1 = tree.value.getHalfCheckedKeys(); //半選的ID
    let permissionId = arr.concat(arr1);
    //下發(fā)權(quán)限
    let result: any = await reqSetPermisstion(roleId, permissionId);
    if (result.code == 200) {      
        drawer.value = false;//抽屜關(guān)閉      
        ElMessage({ type: 'success', message: '分配權(quán)限成功' });//提示信息      
        window.location.reload();//頁面刷新
    }
}

到了這里，關(guān)于vue3-實戰(zhàn)-11-管理后臺-權(quán)限管理之角色管理模塊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！