关于前后端分离权限控制，元素细粒度（iview-admin实现）

摘要：按钮方面按钮通过自定义指令绑定其特定的操作接口信息如产品上传按钮，需要拥有产品上传的信息，才可以继续执行按钮的业务逻辑。

在传统单体项目中，通常会有一些框架用来管理熟知的权限。如耳濡目染的 Shiro 或者 Spring Security 。然而，到了现在这个时代，新开始的项目会更多的才用后端微服务 + 前端 mvvm 的架构开始书写项目。权限控制方面将变得有些许晦涩。当然，得益于 Java 后端的 Spring 项目的可插拔式接口以及前端大部分 SPA 的架构，权限控制也并没有变得那么的难以实现。相反，在我看来只要找到一个合适的插拔插件的入口，权限也可以做的很简单，跟业务只要少许的耦合即可实现我们熟悉的权限模块。

示例代码 iview-admin-permission

后端提供当前登录用户可访问的所有可访问资源接口信息，前端项目根据当前用户所拥有的接口信息，判断是否拥有菜单权限，如果拥有主要访问权限则加入路由，让用户可以访问其当前的页面。

由于 iview-admin 中，路由信息与菜单是同一份资料，所以在加入路由的时候，即可实现菜单的隐藏与现实。

按钮通过 vue 自定义指令绑定其特定的操作接口信息（如：产品上传按钮，需要拥有产品上传的信息，才可以继续执行按钮的业务逻辑）。在按钮或者 a 标签被渲染的时候，判断是否拥有权限，如若没有，可以隐藏，或者劫持原来绑定的点击事件，使其变成无权限的弹窗提示。

该指令支持 render 生成的按钮或者 a 标签。

数据的隐藏与否应该不会放在前端做吧...不然就是沙雕网友了。

这方面可以提供思路，在微服务架构中，如若前端项目拥有 NodeJS 做数据转换层，那是极好的。如果没有，则需要在微服务路由层做一些细微的改变。即用户无权限的数据列（属性）给他模糊掉，变成 * 或者 — 输出。这方面与前端无关，那么并不会在这里出现。

优点：

后端不再关注页面上的事情，基于权限代码让前端自己随心所欲编排

灵活性较高，可以控制页面上所有的元素，可以隐藏弹窗等等喜欢的功能

缺点：

编排路由的时候会显得繁琐，权限代码比较零散，开发完业务页面可能会忘记加上

公司实现并不能成为开源，所以我重新下载一份 iview-admin ，然后加入关键代码，来实现上面所需要的功能。

常规操作：

npm install
npm run dev

正常打开窗口即可进行修改。

接下来就小步前进加入权限的功能。

权限提供了一个用户所拥有的所有权限列表以及一个 getters 后面会用到。

export default {
  state: {
    // { operatorCode: "ProductEndpoint#upload", name: "产品上传" }
    operatorList: []
  },
  getters: {
    hasPermission: (state) => (queryOpcode) => {
      if (!state.operatorList || !state.operatorList.length) {
        return false
      }
      return state.operatorList.map(operatInfo => operatInfo.operatorCode).indexOf(queryOpcode) > -1
    }
  },
  mutations: {
    setPermissionList (state, opList) {
      state.operatorList = opList
    }
  }
}

在这里我定义简单的后端返回值：一个 operatorCode 代表某个操作的代号，一个 name 用于分配权限的时候给用户查看。

operatorCode 有很多中生成方式，我这里采用 SpringMVC 的 Controller 名 + # + 方法名 的形式， Controller 名用于分割不同资源的资源空间。使用 Spring 的生命周期函数，在项目启动的时候扫描，写入数据库，相当于所有的资源。后面的权限模型，以前该怎样就还是怎样，比如用户 —> 角色 —> 资源的模型。然后根据登陆的用户 ID 查询，返回给前端。至于中文名字，我们项目搭配 Swagger 使用，如果没有使用 Swagger 则需要使用自定义开发的注解指定。

注册到 store 中：

import Vue from "vue"
import Vuex from "vuex"

import user from "./module/user"
import app from "./module/app"
import permission from "./module/permission"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //
  },
  mutations: {
    //
  },
  actions: {
    //
  },
  modules: {
    user,
    app,
    permission
  }
})

静态操作数据：

// src/mock/data/permission-data.js
export const getPermissionCodeList = (userName) => {
  if (String(userName) === "1") {
    return [{ operatorCode: "ProductManageEndpoint#createProduct", name: "产品上传" },
      { operatorCode: "ProductManageEndpoint#putawayProduct", name: "产品上架" },
      { operatorCode: "ProductManageEndpoint#delistProduct", name: "产品下架" }]
  } else {
    return [{ operatorCode: "ProductManageEndpoint#createProduct", name: "产品上传" },
      { operatorCode: "ProductManageEndpoint#delistProduct", name: "产品下架" },
      { operatorCode: "ProductManageEndpoint#deleteByUuid", name: "产品删除" }]
  }
}

登陆操作：

// src/view/login/login.vue
...
handleSubmit ({ userName, password }) {
    this.handleLogin({ userName, password }).then(res => {
        this.getUserInfo().then(res => {
            // 用户登陆成功时候加入操作Code
            this.$store.commit("setPermissionList", getPermissionCodeList(userName))
            this.$router.push({
                name: this.$config.homeName
            })
        })
    })
}

加入用户列表的信息，不然不能登录，因为作者默认只放了两个，当然生产项目肯定不管这里啦~~

// src/mock/login.js
const USER_MAP = {
  super_admin: {
    name: "super_admin",
    user_id: "1",
    access: ["super_admin", "admin"],
    token: "super_admin",
    avator: "https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png"
  },
  admin: {
    name: "admin",
    user_id: "2",
    access: ["admin"],
    token: "admin",
    avator: "https://avatars0.githubusercontent.com/u/20942571?s=460&v=4"
  },
  zhangsan: {
    name: "zhangsan",
    user_id: "3",
    access: ["super_admin", "admin"],
    token: "zhangsan",
    avator: "https://avatars0.githubusercontent.com/u/20942571?s=460&v=4"
  },
  lisi: {
    name: "lisi",
    user_id: "4",
    access: ["super_admin", "admin"],
    token: "lisi",
    avator: "https://avatars0.githubusercontent.com/u/20942571?s=460&v=4"
  }
}
...

加入权限数据：

// src/mock/data/permission-data.js
export const getPermissionCodeList = (userName) => {
  if (userName === "zhangsan") {
    return [{ operatorCode: "ProductManageEndpoint#list", name: "产品列表" },
      { operatorCode: "ProductManageEndpoint#createProduct", name: "产品上传" },
      { operatorCode: "ProductManageEndpoint#putawayProduct", name: "产品上架" },
      { operatorCode: "ProductManageEndpoint#delistProduct", name: "产品下架" }]
  } else {
    return [{ operatorCode: "ProductManageEndpoint#createProduct", name: "产品上传" },
      { operatorCode: "ProductManageEndpoint#delistProduct", name: "产品下架" },
      { operatorCode: "ProductManageEndpoint#deleteByUuid", name: "产品删除" }]
  }
}

刚开始我们先设立一个口进入，由于项目的 menuList 挂载在 store 的 app.js 里面，所以我们需要在这里动刀。

这里修改造成两个事情：1. 清掉项目原来的 router 的菜单，但是还可以访问（因为内存加载了）；2. 我加入了需要权限管理的菜单，但是还不能访问，因为路由还没有。

// src/store/module/app.js
...
getters: {
    menuList: (state, getters, rootState) => {
      const allMenus = []
      const menuWithPermission = getMenuWithPermissionByRouter(routersWithPermission, rootState.permission.operatorList)
      allMenus.push(...menuWithPermission)
      return allMenus
    }
}
...

那么这里用到一个函数 getMenuWithPermissionByRouter，我决定放在 util.js 即可

// src/libs/util.js
...
export const getMenuWithPermissionByRouter = (routerWithPermissionList, userOperatorList) => {
  return []
}

OK，运行项目。很好，没有出现错误，继续前行。

我的需求是这样的，当一个路由，在 meta 里面的 requireCode 用户拥有第一项操作权限的时候，是可以进入的，也就是菜单需要加载出来。

export default [
  {
    path: "/product",
    name: "product",
    component: Main,
    meta: {
      hideInBread: true
    },
    children: [
      {
        path: "list",
        name: "list",
        meta: {
          title: "product-list",
          requireCode: ["ProductManageEndpoint#list", "ProductManageEndpoint#createProduct", "ProductManageEndpoint#putawayProduct", "ProductManageEndpoint#delistProduct", "ProductManageEndpoint#deleteByUuid"]
        },
        component: () => import("@/view/product/product-list.vue")
      },
      {
        path: "add",
        name: "add",
        meta: {
          title: "product-add",
          requireCode: ["ProductManageEndpoint#createProduct"]
        },
        component: () => import("@/view/product/product-form.vue")
      }
    ]
  }
]

当这个页面需要同时满足两个要求的资源操作的时候，第一项使用数组装载。即：

requireCode: [["ProductManageEndpoint#list", "ProductManageEndpoint#createProduct"], "ProductManageEndpoint#putawayProduct", "ProductManageEndpoint#delistProduct", "ProductManageEndpoint#deleteByUuid"]

那么这个页面需要同时满足前面两个的时候，才能加载出来。

那么开始编写 getMenuWithPermissionByRouter 函数。呃，怎么说呢，先把 Aresn 的代码拷过来改改满足我上面的需求即可：

/**
 * 根据需要控制菜单的路由，获取菜单列表
 * @param routerWithPermissionList 需要权限管理的路由
 * @param userOperatorList 用户拥有的所有操作
 * @returns {Array}
 */
export const getMenuWithPermissionByRouter = (routerWithPermissionList, userOperatorList) => {
  // debugger
  let res = []
  const allOpCodeArr = userOperatorList.map(opCodeObj => opCodeObj.operatorCode)
  forEach(routerWithPermissionList, item => {
    if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
      let obj = {
        icon: (item.meta && item.meta.icon) || "",
        name: item.name,
        meta: item.meta
      }
      if ((hasChild(item) || (item.meta && item.meta.showAlways))) {
        obj.children = getMenuWithPermissionByRouter(item.children, userOperatorList)
      }
      if (hasThisMenuPermission(item, allOpCodeArr) || hasChild(item)) res.push(obj)
    }
  })
  return res
}

const hasThisMenuPermission = (routerInfo, allOpCodeArr) => {
  if (routerInfo.meta && routerInfo.meta.requireCode && routerInfo.meta.requireCode.length) {
    const requireCode = routerInfo.meta.requireCode[0]
    if (Array.isArray(requireCode)) {
      let hasPermission = true
      for (let i = 0; i < requireCode.length; i++) {
        hasPermission = hasPermission && allOpCodeArr.indexOf(requireCode[i]) > -1
      }
      return hasPermission
    } else {
      return allOpCodeArr.indexOf(requireCode) > -1
    }
  } else return false
}

OK，如图所示，已经把菜单加载出来了。但是现在出现一个问题，就是刷新页面的时候，什么都没了。因为刷新页面的时候，内存中的 store 被置空了。

// src/view/single-page/home/home.vue
...
mounted () {
    // 需要在这里加载权限信息
    const userName = this.$store.state.user.userName
    this.$store.commit("setPermissionList", getPermissionCodeList(userName))
}
...

可喜可贺，刷新的时候，菜单已经出来了。但是有个报错，报 sideMenu 的 undefined 异常。是由于刚开始刷新页面的时候，菜单还没有出来，而代码写死了读第0个元素，菜单是空数组，所以理所当然导致了异常。

// src/components/main/components/side-menu/side-menu.vue 第 20 行，去掉最后属性的或者即可

OK，我感觉最难的菜单搞定了。接下来要搞定路由。

有了前面的铺垫，我感觉路由要好做很多了。

动态路由有一个调用的函数是：

router.addRoutes(routes: Array)

那么我们需要做的只是，获取有权限的路由，然后加入到 Vue 中。

但是这段代码有点问题就是每次进入都会调用一次= =

// src/view/single-page/home/home.vue
mounted () {
    // 需要在这里加载权限信息
    const userName = this.$store.state.user.userName
    this.$store.commit("setPermissionList", getPermissionCodeList(userName))
    const routers = getRouterWithPermission(routersWithPermission, this.$store.state.permission.operatorList)
    const originRouteNames = this.$router.options.routes.map(r => r.name)
    // 需要解决重复加入问题
    if (routers && routers.length && originRouteNames.indexOf(routers[0].name) < 0) {
        this.$router.addRoutes(routers)
    }
}

好了，菜单有了，路由有了，点击测试能否进入。

然后被作者的路由拦截到了-,-

// src/router/index.js
const turnTo = (to, access, next) => {
  next() // 直接过。
}

分别登陆 zhangsan 和 lisi 从上面的测试权限数据可以看到，lisi 是进入不了产品列表的。

强行进入：

OK，正确了，如果没有权限，肯定就没有页面嘛，直接404.

页面的跳转搞定了，接下来就要考虑按钮的问题了。那么上面设置的 Vuex 的 hasPermission 在这里派上用场。关于按钮的绑定，思路来源于 Vue 的自定义指令，只需要在主页面注册自定义指令，每次页面加载的时候，加载到指定指令的组件，开始读取这个组件的 operaCode 是否在当前登陆的用户中，如果存在，则继续执行，如果不存在，则拿到了节点的 Vnode 开始设置我们想要的东西，比如锁定按钮啊，劫持点击事件弹出提示，或者隐藏都可以。

// src/main.js
/**
 * 注册权限控制指令
 */
Vue.directive("opcode", {
  bind: function (el, opcode, vnode, oldVNode) {
    const requireOpCode = opcode.value
    // 如果用户没有这个操作Code的权限，那么劫持click事件，赋予弹出无权限弹窗的事件
    console.log(requireOpCode);
    if (vnode.componentInstance === undefined || vnode.componentInstance === null) {
      if (!vnode.context.$store.getters.hasPermission(requireOpCode)) {
        vnode.data.on.click.fns = function () {
          Modal.warning({
            title: "无权限",
            content: "很抱歉，您没有这项操作的权限"
          })
        }
      }
    } else {
      if (!vnode.componentInstance.$store.getters.hasPermission(requireOpCode)) {
        vnode.componentInstance.$off("click")
        vnode.componentInstance.$on("click", function () {
          Modal.warning({
            title: "无权限",
            content: "很抱歉，您没有这项操作的权限"
          })
        })
      }
    }
  }
})

常规按钮使用：

上传新商品

Render 函数中使用：

// src/view/product/product-list.vue
prodColumns: [
        {
          title: "商品名称",
          key: "pname",
          align: "center",
          width: 300
        },
        {
          title: "操作",
          key: "operator",
          align: "center",
          render: (h, params) => {
            return h("a", {
              attrs: {
                href: "javascript:;"
              },
              on: {
                click: () => {
                  this.handleEditProduct(params.row)
                }
              },
              // 在这里注册自定义指令
              directives: [
                {
                  name: "opcode",
                  value: "ProductManageEndpoint#updateByUuid"
                }
              ]
            }, "编辑")
          }
        }
      ],

这种方式即使分页，改变表格数据，也可以被主页面上的判断监听到。

PS：在这里就可以看到了按钮的编排的问题，即我们新增产品的页面接口，是在填写完 Form 表单的时候才开始请求的，但是我们需要在两个地方做设置，一个是跳转页面（路由+菜单），一个是新增产品的按钮，即需要把这个权限拦截提前到进入页面之前。这方面现在确实想不到更好的解决办法了。

回顾一下权限设置数据：

export const getPermissionCodeList = (userName) => {
  if (userName === "zhangsan") {
    return [{ operatorCode: "ProductManageEndpoint#list", name: "产品列表" },
      { operatorCode: "ProductManageEndpoint#createProduct", name: "产品上传" },
      { operatorCode: "ProductManageEndpoint#putawayProduct", name: "产品上架" },
      { operatorCode: "ProductManageEndpoint#delistProduct", name: "产品下架" }]
  } else {
    return [{ operatorCode: "ProductManageEndpoint#createProduct", name: "产品上传" },
      { operatorCode: "ProductManageEndpoint#delistProduct", name: "产品下架" },
      { operatorCode: "ProductManageEndpoint#deleteByUuid", name: "产品删除" }]
  }
}

我们知道，用户名为 zhangsan 是没有删除产品权限以及编辑产品的，但是前面的都有。而 lisi 用户，没有产品列表功能，所以列表都不可以进去。

zhangsan 用户界面：

lisi 用户界面：

我们知道，经典权限模型是用户、角色、资源的编排。那么我们可以设置一系列的角色，当然记得给自己预留一个流氓角色可以读取所有资源和角色的，利于管理。每个角色可以绑定不同的资源，也可以绑定不同的用户。这样用户一旦登陆，即可读取所有角色中的所有资源操作（记得去重）。

我们公司的绑定界面，通过读取用户所拥有的所有资源，再把 router 中绑定的读取出来（当然过滤掉当前绑定用户无权限的），然后通过加载勾选，最后发送请求给服务器做修改。这样设置可以无限极下限，只要赋予用户授权的权限，用户即可一直创建然后绑定他想绑定的。

当前所做的都是前端需要做的工作，后端也需要配合完成接口的调用，即使前端做了设置，但是有些用户可以绕过前端，这时候所有的权限操作就需要后端来拦截了。

作者：WeidanLi
我的博客