Vue 项目权限管理

介绍

在项目中，无处不在对用户的访问权限与操作权限做处理，访问权限大家再熟悉不过了，在 Vue 项目中可直接在 router >  index.ts 或是 js 文件对其进行处理，采用 beforEach 与 afterEach技术，但是设计到内部某行数据或是操作按钮就要用到了 Vue 中的自定义指令了。

router

to  即将进入路由对象

from  当前正要离开的路由对象

next  用来管控是否进入下一级路由

beforEach 跳转前触发

此函数好处就是在用户还未跳转到指定路由就将其拦截，避免用户看到界面以及闪屏等现象

router.beforeEach((
    to,
    from,
    next
) => {
   // 此处对用户权限进行处理
   // 1. 用户信息  2. 角色权限
   // 内部逻辑根据自己业务进行编写
})

afterEach 跳转后触发

两者语法上并无区别，此处就不过多介绍。

router.afterEach((
    to,
    from,
    next
) => {
   // 此处对用户权限进行处理
   // 1. 用户信息  2. 角色权限
   // 内部逻辑根据自己业务进行编写
})

通过以上方式可对用户访问界面进行控制，也就是所谓的黑白名单，此处建议使用 beforEach 优缺点上方已介绍。

Vue directive 自定义指令

对项目中的菜单按钮进行管控，使用 v-if 判断过于笨重及存在不确定因素，因此使用自定义指令，在项目中定义 directive.ts 用于储存 directive指令并在 main.ts 中引入挂在到全局并使用。

案列：

directive.ts 文件

// 注册（函数形式的指令）
const directive = (app:any) => {
    app.directive('test', {
        mounted(el:any, binding:any) {
            // binding.value  指令携带的参数
            // 指令内部逻辑处理
        }
    })
}
export default directive

main.ts 

此处将 app.directive('test') 放入全局并在组件中使用

import App from './App.vue'
import { createApp } from 'vue'
import directive from "@/utils/directive"

const app = createApp(App)

app.use(app.directive('test'))

app.mount('#app')

组件使用

<template>
    <div v-test="['test']"></div>
</template>

<script setup lang="ts">
     
</script>

<style lang="less">
    
</style>

以上使用方式思路为首先在后台角色权限中对其用户分配角色包括按钮级别，通过获取后端接口将此数据储存并在 v-test 自定义指令中使用，例如：v-test="['cloudAdd']" 如存在则显示，此步需要在指令函数体中对储存的数据和传入的参数进行对比即可实现。