Core + Vue 后台管理基础框架4——前端授权

1、前言

　　上篇，我们讲了后端的授权。与后端不同，前端主要是通过功能入口如菜单、按钮的显隐来控制授权的。具体来讲，就是根据指定用户的制定权限来加载对应侧边栏菜单和页面内的功能按钮。我们一个个来讲。

2、侧边栏菜单

　　鉴于本项目使用了vue-router，那显然，侧边栏就会跟对应路由关联，同时，前端项目会注册路由导航事件，此事件见src根目录下permission.js：

 　　截图中，上边的红框代表是在注册路由跳转前回调钩子，此钩子可以根据具体情况决定是否需要导航到目的路由或导航到其他路由。下边的红框先调用menu store中的获取侧边栏action，从后端拿到本用户具有权限的侧边栏菜单：

 　　从后端拿到侧边栏菜单json，前端是没办法直接使用的，一堆json对象或者字符串，与Vue路由、视图并没法儿无缝衔接，所以上边我们看到调用了travseRoutes方法，此方法在前端工具类route.js中，如下：

 　　主要用意就是经由后端动态菜单配置前端vue-router动态路由，用到了vue-router中路由懒加载这个重要的特性。以上就是前端动态侧边栏的实现。

3、功能按钮

　　大部分项目都做到了菜单级的权限控制，但做到页面级别的，倒是不多。毕竟他该多，而且也是要费点儿功夫的。那这里我们就来看看前端是如何实现按钮级权限控制的。

　　一般而言，组件显隐可以通过v-show或v-if，但若通过这种方式，恐怕得在viewmodel中定义大量属性，最好的情况，也得在需要控制的地方顶一个计算属性吧，这种方式恐怕代价还是有一些的。针对这点，web-flash前端项目中，很巧妙地用到了自定义Vue指令这个特性，将按钮的加载与去除逻辑封装了起来，具体在前端项目src/directive/permission.js中：

import store from '@/store'

export default{
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters && store.getters.permissions
    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value
      const hasPermission = permissions.some(permission => {
        return permissionRoles.includes(permission)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
    }
  }
}

　　自定义指令有几种类型钩子函数，这里选取了inserted，代表是在元素插入后判断有无指定按钮权限，如果没有，则从界面再移除。接下来，我们就实际看看效果。首先，在用户管理对应的视图js中引入自定义指令：

 

 　　然后，我们在用户视图文件中对新增、编辑、删除用户几个按钮用自定义指令做权限控制：

 <el-col :span="24">
          <el-button type="success" size="mini" icon="el-icon-plus" @click.native="add" v-permission="['/mgr/add']">
            {{$t('button.add') }}
          </el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" @click.native="edit" v-permission="['/mgr/edit']">
            {{$t('button.edit') }}
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="remove" v-permission="['/mgr/delete']">
            {{$t('button.delete') }}
          </el-button>
          <el-button type="info" size="mini" icon="el-icon-role" @click.native="openRole">角色分配</el-button>
        </el-col>
      </el-row>

　　之后，我们用一个不具有用增删改权限的用户登录系统：

 

 　　可以看到，添加、修改、删除用户菜单是不可见的。那现在我把添加按钮的v-permission指令拿掉，则再看效果：

 　　可见，拿掉v-perission，添加用户按钮显示出来了，反面说明前端授权生效了。