1.按鈕根據(jù)后端返回?cái)?shù)據(jù)決定展示與否

根據(jù)right中的數(shù)據(jù)對(duì)應(yīng)增刪改查按鈕

const menuList = [
    {'id': 1, path:'/uploadSpec','authName': "上傳spec", icon: 'User', children:[], rights:['view','add','edit','delete']},
    {'id': 2, path:'/showSpec', 'authName': "Spec預(yù)覽", icon: 'DataAnalysis',children:[], rights:['view','add','edit','delete']},
    {'id': 3, path:'/generateTxt', 'authName': "生成測(cè)試數(shù)據(jù)", icon: 'DataAnalysis',children:[], rights:['view','add','edit','delete']},
    {'id': 4, path:'/generateCronjob', 'authName': "生成轉(zhuǎn)碼程序", icon: 'Promotion',children:[], rights:['view','add','edit','delete']},
    {'id': 5, path:'/pdfCompare', 'authName': "PDF文檔對(duì)比", icon: 'DocumentCopy',children:[], rights:['view','add','edit','delete']},
    {'id': 6, path:'/resourceUpdate', 'authName': "資源更新管理", icon: 'Management',children:[], rights:['view','add','edit','delete']},
    {'id': 7, path:'/generateTestCase', 'authName': "自動(dòng)生成ST/SIT案例", icon: 'Files',children:[], rights:['view','add','edit','delete']},
    {'id': 8, path:'/userManagement', 'authName': "用戶管理", icon: 'User', rights:['view']},
    {'id': 9, path:'/roleManagement', 'authName': "角色管理", icon: 'Stamp', rights:['view']},
]

2.在設(shè)置動(dòng)態(tài)路由時(shí)，將rights權(quán)限數(shù)據(jù)設(shè)置到路由元數(shù)據(jù)中meta

?initDynamicRoutes給用戶對(duì)應(yīng)的router中動(dòng)態(tài)添加meta元數(shù)據(jù)后，permission.js中通過router.currentRoute就可以獲取

export const initDynamicRoutes = async () => {
    const menuList = Store.state.user.menuList;;
    const rights = Store.state.user.rights;;

    menuList.length > 0 && menuList.forEach(item => {
        if (item.path) {
            const temp = routeMapping[item.path];
            // 動(dòng)態(tài)添加rights到meta中，使用自定義指令時(shí)通過rights鑒別其是否有該權(quán)限
            temp.meta.rights = item.rights;
            router.addRoute("Home", temp);
        }
    });
    router.addRoute({ name: 'NotFound', path: '/404', title: "頁面不存在", component: NotFound });
    router.addRoute({ path: '/:pathMatch(.*)', redirect: '/404' });
}

3.按鈕上通過自定義指令控制

directives/permission.js

獲取路由元數(shù)據(jù)中的rights權(quán)限和按鈕上的action記錄權(quán)限做比較：如果包含則有該權(quán)限，否則無權(quán)限，進(jìn)行刪除元素或者設(shè)置disabled文章來源地址http://www.zghlxwxcb.cn/news/detail-677397.html

import router from "@/route/route"
import { nextTick } from 'vue'

export const vHas = {
    created(el, binding, vnode, prevVnode) {
        let metaRights = router.currentRoute.value.meta.rights;
        let action = binding.value.action;
        let effect = binding.value.effect;

        if (!metaRights.includes(action)) {
            // 注意要使用nextTick，才能立即修改DOM
            nextTick(() => {
                if (effect === "disabled") {
                    el.ariaDisabled = 'true';
                    el.classList.add('is-disabled')
                } else {
                    if (el.parentNode)
                        el.parentNode.removeChild(el)
                    else
                        el.remove();
                }
            });
        }
    }
}

4.頁面中使用v-has指令

<template>
<div>
    <el-button type="primary" v-has="{action:'add',effect:'disabled'}">增加角色</el-button>
    <el-button type="success" v-has="{action:'edit'}">修改角色</el-button>
    <el-button type="info" v-has="{action:'view'}">查看角色</el-button>
    <el-button type="warning" v-has="{action:'delete',effect:'disabled'}">刪除角色</el-button>
</div>
   
</template>
<script setup>
import { vHas } from "@/directives/permission"

</script>

到了這里，關(guān)于vue權(quán)限管理——按鈕控制的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！