vue权限按钮的实现

鉴权函数

由于下面几种方式都需要用到鉴权函数，所以将其放置在组件外面，供组件或其他文件调用。

1.  
   // src/utils/hasPermission.js
2.  
    
3.  
   import { usePermissionStore } from '@/stores'
4.  
   import array from 'lodash/array'
5.  
   export const hasPermission = (value, def = true) => {
6.  
   // 不传值，默认视为有权限，不做鉴权
7.  
   if (!value) {
8.  
   return def
9.  
   }
10.  
     
11.  
    const allCodeList = usePermissionStore().getPermCodeList
12.  
    // 如果不是数组，直接判断pinia里的权限数组有没有相同的元素即可
13.  
    if (!Array.isArray(value)) {
14.  
    return allCodeList.includes(value)
15.  
    }
16.  
    // intersection是lodash提供的一个方法，用于返回一个所有给定数组都存在的元素组成的数组
17.  
    return array.intersection(value, allCodeList).length > 0
18.  
    }

将可以操作按钮的权限码们以权限码数组的形式存放到了pinia中，所以要先获取pinia中的权限数组再进行判断。

1. 情况一：没有传值，则无法做权限码的比对，所以可以认为不需要鉴权，返回true即可。
2. 情况二：传入的值是权限码数值，不是数组，那么可以拿pinia中的权限码数组来检测是否包含该权限码，如果有则认为有权限返回true；否则返回false。
3. 情况三：传入的值是权限码数组，此时需要拿传入的数组和pinia中的权限码数组进行比较，看看是否存在交集，如果有交集则说明有权限，返回true；否则返回false。

Pinia：

1.  
   // store/index.js
2.  
    
3.  
   import { createPinia } from "pinia";
4.  
    
5.  
   const pinia=createPinia()
6.  
    
7.  
   export default pinia
8.  
    
9.  
   export * from './modules/permission.js'

1.  
   // store/modules/permission.js
2.  
    
3.  
   import { defineStore } from 'pinia'
4.  
   import { getPermissionList } from '@/api/permission'
5.  
   export const usePermissionStore = defineStore('permission', {
6.  
   state: () => ({
7.  
   // 权限代码列表
8.  
   permCodeList: [101, 102, 778, 779]
9.  
   }),
10.  
    getters: {
11.  
    // 获取
12.  
    getPermCodeList() {
13.  
    return this.permCodeList
14.  
    }
15.  
    },
16.  
    actions: {
17.  
    // 存储
18.  
    setPermCodeList(codeList) {
19.  
    this.permCodeList = codeList
20.  
    },
21.  
     
22.  
    // 请求权限码
23.  
    async getPermissionCode() {
24.  
    const codeList = await getPermissionList()
25.  
    this.setPermCodeList(codeList)
26.  
    }
27.  
    }
28.  
    })

方式一：v-if搭配鉴权函数实现权限按钮

引入鉴权函数，将该能够操作该按钮的权限码以实参形式传入鉴权函数，v-if根据返回值决定是否加载该按钮结构。

1.  
   <template>
2.  
   <div>
3.  
   <button class="fun-btn" v-if="hasPermission([101])">你能看到我？-v-if函数实现</button>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script setup>
8.  
   import { hasPermission } from '@/utils/hasPermission'
9.  
   </script>
10.  
     
11.  
    <style scoped lang="scss"></style>

方式二：组件 插槽 实现权限按钮

将按钮以插槽形式放入组件中，给组件以props传递权限码数据，组件中使用鉴权函数来判断传入的权限码是否符合条件，符合则渲染插槽中的结构（按钮），否则不渲染。

1.  
   <!--components/PermisBtnComp.vue-->
2.  
   <template></template>
3.  
    
4.  
   <script>
5.  
   // h函数 https://cn.vuejs.org/api/render-function.html#h
6.  
   // defineComponent-函数签名 https://cn.vuejs.org/api/general.html#definecomponent
7.  
   import { hasPermission } from '@/utils/hasPermission'
8.  
   import { renderSlot, h, defineComponent } from 'vue'
9.  
    
10.  
    export default defineComponent({
11.  
    props: {
12.  
    value: {
13.  
    type: [Number, String, Array],
14.  
    default: ''
15.  
    }
16.  
    },
17.  
    setup(props, { slots }) {
18.  
    return () => {
19.  
    // 根据权限判断结果来确定是否要渲染默认插槽的结构
20.  
    // 在 Vue 3 中，通过 renderSlot(父组件传入的插槽内容,插槽名) 函数进行插槽渲染时，需要将其导入并包含在组件的 setup 方法中。
21.  
    // 父组件引用子组件时，子组件标签内的默认内容对应的是：renderSlot(slots, 'default')
22.  
    // return hasPermission(props.value) ? h('div', renderSlot(slots, 'default')) : null
23.  
     
24.  
    // 免去renderSlot https://cn.vuejs.org/guide/extras/render-function.html#rendering-slots
25.  
    return hasPermission(props.value) ? h('div', slots.default()) : null
26.  
    }
27.  
    }
28.  
    })
29.  
    </script>
30.  
     
31.  
    <style scoped lang="scss"></style>

方式三：自定义指令 实现权限按钮

自定义指令其实和第一种很像，就是我们自己出一个"v-if"，只不过是专门用来做权限判断的指令。指令传入的数据即为权限码，指令内部根据指令绑定的数据来做鉴权判断。

注意点1：这里的mounted可能较容易实现，但需要注意updated的设计，考虑到有动态修改指令后面的权限码的可能，所以当涉及到指令后面的权限码修改后，要重新做鉴权判断。

注意点2：自定义指令在内部的鉴权判断后，如果不符合条件要移除指令所在的结构；如果符合条件的话，要把之前因为不符合条件被移除的结构要添加回来，也就是回添操作；回添操作为了避免不知道把原来的结构添加回来到哪个位置，这里使用了document.createComment() 即注释先做占位，等需要回添时使用replaceChild() 把注释替换为按钮结构。如果使用的是remove()或removeChild()可能再放回来就不知道放到哪个位置了。

1.  
   // src/directs/judge-permission.js
2.  
    
3.  
   import { hasPermission } from '@/utils/hasPermission'
4.  
    
5.  
   // removeDom、addDom的存在是为了保证自定义指令绑定的权限码数据变化后可以不刷新页面动态添加/移除自定义指令所在的dom节点
6.  
   // 移除dom节点
7.  
   const removeDom = (el) => {
8.  
   // 把注释点绑在元素上，方便后面使用
9.  
   el._placeholderNode = document.createComment('permission-btn')
10.  
    // 和父节点关联上，方便后面使用
11.  
    el._parentNode = el.parentNode
12.  
    // 父节点做子元素替换
13.  
    el.parentNode.replaceChild(el._placeholderNode, el)
14.  
    }
15.  
     
16.  
    // 把移除的dom节点添加回来
17.  
    const addDom = (el) => {
18.  
    el._parentNode?.replaceChild(el, el._placeholderNode)
19.  
    }
20.  
     
21.  
    const mounted = (el, binding) => {
22.  
    const permisList = binding.value
23.  
    if (!permisList) return
24.  
    if (!hasPermission(permisList)) {
25.  
    // 移除当前dom节点
26.  
    // el.parentNode?.removeChild(el) // 通过父节点删除子自己
27.  
    // el.remove() // 自杀
28.  
    /*
29.  
    权限值会变，那就涉及到更新后要不要将移除的dom节点添加回来
30.  
    为了能够知道添加回来的dom节点放到哪个地方，可以创建注释节点来占位
31.  
    在添加时只对那个位置的子元素做替换操作即可
32.  
    */
33.  
    removeDom(el)
34.  
    }
35.  
    }
36.  
     
37.  
    const updated = (el, binding) => {
38.  
    // 比对前后变化的值，相同不需要后续操作
39.  
    let valDiff = binding.value === binding.oldValue
40.  
    if (valDiff) return
41.  
    // 重新判断改值前后的权限变化，相同不需要后续操作（如：修改前就没权限，修改后依旧没权限，无需操作）
42.  
    let oldPermisStatus = hasPermission(binding.oldValue)
43.  
    let nowPermisStatus = hasPermission(binding.value)
44.  
     
45.  
    if (oldPermisStatus == nowPermisStatus) return
46.  
    if (nowPermisStatus) {
47.  
    addDom(el)
48.  
    } else {
49.  
    removeDom(el)
50.  
    }
51.  
    }
52.  
     
53.  
    export const permisDirect = {
54.  
    mounted,
55.  
    updated
56.  
    }

main.js中添加指令：

1.  
   import { createApp } from 'vue'
2.  
   import './style.css'
3.  
   import App from './App.vue'
4.  
   import pinia from './stores'
5.  
   import {permisDirect} from '@/directs/judge-permission'
6.  
    
7.  
   const app=createApp(App)
8.  
   app.use(pinia)
9.  
   app.directive('permis',permisDirect)
10.  
    app.mount('#app')

根组件效果展示

1.  
   <script setup>
2.  
   import PermisBtnFun from './components/PermisBtnFun.vue'
3.  
   import PermisBtnComp from './components/PermisBtnComp.vue'
4.  
   import { ref } from 'vue'
5.  
    
6.  
   const permis = ref(102)
7.  
   const permisToggle = () => {
8.  
   // 由于@/utils/hasPermission中有判断!value则返回true，表示没传值默认不需要鉴权，返回true放行
9.  
   // 所以这里在调整权限值的时候不能改成0，因为!0==true，如果变化前就有权限(true),变化后想没权限改为0，刚好!0是true，弄巧成拙，依旧显示。
10.  
    permis.value === 102 ? (permis.value = 100) : (permis.value = 102)
11.  
    }
12.  
    </script>
13.  
     
14.  
    <template>
15.  
    <div class="btns-container">
16.  
    <!-- v-if搭配函数方式 -->
17.  
    <PermisBtnFun />
18.  
    <!-- 组件 插槽方式 -->
19.  
    <PermisBtnComp :value="101">
20.  
    <button class="comp-slot-btn">就你能耐？-组件插槽实现</button>
21.  
    </PermisBtnComp>
22.  
    <!-- 自定义指令方式 -->
23.  
    <button class="vpermis-btn" v-permis="permis">你依旧能看得到我？-自定义指令实现</button>
24.  
    <!-- 修改自定义指令绑定的权限值，测试自定义指令updated中的移除和回添的操作 -->
25.  
    <button @click="permisToggle">修改自定义指令绑定的权限值</button>
26.  
    </div>
27.  
    </template>
28.  
     
29.  
    <style scoped>
30.  
    .btns-container {
31.  
    display: flex;
32.  
    flex-direction: column;
33.  
    justify-content: space-around;
34.  
    height: 400px;
35.  
    }
36.  
    /* ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. */
37.  
    :deep(.fun-btn) {
38.  
    background-color: #acd384;
39.  
    color: #fff;
40.  
    }
41.  
    .vpermis-btn {
42.  
    background-color: #f38585;
43.  
    color: #fff;
44.  
    }
45.  
    .comp-slot-btn {
46.  
    background-color: #5aa3f8;
47.  
    color: #fff;
48.  
    }
49.  
    </style>

这篇好文章是转载于：学新通技术网