本文已参与「新人创作礼」活动，一起开启掘金创作之路

前言

看过我之前文章的xdm都知道，我们已经完成了权限认证的实现。下边我们说一下一些不足和修改方法

indexOf的优化

我们之前使用[].indexOf('')来判断是否含有权限码，但是这个有一个极端情况。我们每次都需要判断一下返回的index是否大于-1，很不方便。所以我开始寻找解决的方案。

• some：array的some方法接受一个判断条件，然后返回是否满足条件。写法为：

['system-user:addCommon','system-user:add'].some(item=>item==='system-user:add');

这样写也没有什么问题，但是有什么方法能更优化一下呢，毕竟写判断条件的长度都>判断是否大于-1的长度了

• includes：我在查寻解决方案的时候发现，es6添加了一个includes方法，直接返回是否包含该元素。现在我们来探讨一下效率问题。在使用some的时候，我查询的它会在满足条件之后直接跳出循环，但是我没有查询到includes的源码。我们直接采用最暴力的测试方式：初始化一个非常大的数组，分别记录执行这两个方法的时间。最终发现：includes效率比some高一点，所以修改项目中的indexOf为includes

按钮权限判断的优化

我们之前做按钮权限判断使用的是：定义一个方法获取用户的按钮权限码，然后和传入的权限码比较。我们这里修改稿为更简单的实现：基于自定义指令的按钮权限判断

编写一个自定义指令

在src/utils下新建directive/index.ts内容如下

import type { App } from 'vue'
import { Session } from '@/utils/cache/index'
export function directive(app: App) {
  // 权限验证（v-has="xxx"）
  app.directive('has', {
    mounted(el, binding) {
      let userInfo = Session.get('userInfo') || {}
      let memuCode = userInfo?.roleCode || []
      memuCode = memuCode.filter((item) => item.indexOf(':') > -1)
      if (!memuCode.includes(binding.value)) {
        el.parentNode.removeChild(el)
      }
    }
  })
}

这里我们定义了一个v-has命令，在mounted的时候加载

全局引入自定义指令

修改main.ts,内容如下

import { createApp } from 'vue'
import App from './App.vue'
import route from '@/router/index'
import { createPinia } from 'pinia'
import 'element-plus/dist/index.css'
import { directive } from './utils/directive'
const pinia = createPinia()
const app = createApp(App)
directive(app)
app.use(route).use(pinia)
app.mount('#app')

在文件中调用自定义指令

在需要按钮权限判断的地方添加代码如下

<el-button v-has="'system-user:add'">增 </el-button>
<el-button v-has="'system-user:del'">删</el-button>
<el-button v-has="'system-user:update'">改</el-button>
<el-button v-has="'system-user:search'">查</el-button>

至此，我们已经完成了，新建自定义指令实现按钮权限判断

结语

现在我们基础的管理的模板搭建的差不多了，我们剩下的就是集成一些插件来实现特殊需求了。例如大屏、markdown、svg图标等。
我将在以后的文章中持续集成这些组件。欢迎关注我的Vite+TS搭建管理端的系列文章。您的点赞是我更新的最大动力
欢迎关注我的掘金账号:juejin.cn/user/261290…
欢迎star我的git项目:gitee.com/liangminghu…
下期预告：菜单优化，引入svg显示菜单icon