Vue中后台鉴权 - 自定义指令实现权限颗粒化

由于项目的后端接口部署在easy-mock上面，因此接口偶尔会挂掉，若是出现登陆网络错误，确定是easy-mock挂了，过段时间就好(感谢easy-mock的开发者以及维护者)

借用大佬的一张图，侵权立删

说一行代码有点夸大的意思，感谢vue提供了完善的api，让咱们能够用最少的代码实现功能，这也是我本身想出来的，因此保不齐存在一些考虑不周的问题，若是有问题请评论🤣

前言

上星期在掘金发布了Vue中后台鉴权的另外一种思路 - 动态路由的实现与优化，有同志在评论下提出了一些问题

1. vue单点登陆怎么作

   我以前写过一个全栈项目，vue+koa2+jwt实现单点登陆 + todolist增删改查，有项目介绍，感兴趣的话能够看看😄

2. 若是须要大量的按钮级的权鉴 该怎么作

   本次文章的主题，这个需求在中后台很常见，在同一个管理表单中，某些按钮是不可让没有权限的人操做的，那么就须要将按钮进行权限的划分，也就是权限颗粒化

最新案例已经更新到github，欢迎体验~~ vue-element-asyncLogin， 你的start是个人动力!

实现思路

• 根据后端返回的权限列表进行按钮的控制
• 须要利于维护，而且较少的代码进行功能的实现

v-if的实现

很显然这个使用v-if就能够完成这个需求，撸一个权限数列的公共效验函数，而后在v-if中进行使用，可是这样有一个缺点

每一个须要效验权限的页面都须要引入文件，并进行代码的调用，才能在页面中使用 v-if

示例代码:

src\utils\index.js

import store from '../store'

/** * 效验权限 * @param {String} e 权限标号 */
export function permit(e) {
    return store.getters.roles.includes(e)
}

复制代码

src\views\dashboard\index.vue

<el-button v-if="basePermit('edit')" type="warning">修改</el-button>
<el-button v-if="basePermit('view')" type="success">查看</el-button>

import { permit } from '../../utils/index.js'
// ...
methods: {
    basePermit(e) {
        return permit(e)
    }
}
复制代码

这样虽然能够实现，可是很麻烦，不少页面都须要的话，代码繁琐，这不是咱们想要的

自定义指令的实现

对于权限颗粒化来讲，咱们能够感受到，功能比较简单，而且不少页面都要用，那为何不使用一种全局均可以使用的方法来实现呢?

使用自定义指令就能够实现，代码也会变的异常简单

1. 在你页面发生刷新的时候进行权限列表的请求
2. 存储到vuex或者浏览器
3. 建立自定义指令

src\utils\directive.js

import Vue from 'vue'
import store from '../store'
/** * @export 自定义指令 */
export function directive() {
  Vue.directive('permit'， {
    bind(el， binding) {
        // 一行三目运算符就可
      !store.getters.roles.includes(binding.value) ? el.parentNode.removeChild(el) : {}
    }
  })
}

复制代码

4. 须要引入src\main.js

import { directive } from './utils/directive'
// ....
directive()
// ....
复制代码

咱们在项目中如何使用自定义指令进行按钮级别的权限控制呢?

很简单

<el-button v-permit="'add'" type="primary">增长</el-button>
<el-button v-permit="'delete'" type="danger">删除</el-button>
<el-button v-permit="'edit'" type="warning">修改</el-button>
<el-button v-permit="'view'" type="success">查看</el-button>
复制代码

完事了~~~~

demo连接在文章底部

项目截图

你学会了吗😄

项目地址 vue-element-asyncLogin， 若是对你有帮助，请不要吝啬你的start~~😄