vue项目中，除了有路由权限，也有页面内的按钮级别权限，，比如只有管理员才有删除数据的功能，才会显示删除按钮。

获取权限数据并保存在vuex中

首先登录的时候，后端接口会把权限的数据返回给我们，我们把它存在vuex中，假如后端的返回结果如下：

[{    authority: "afterCar:materialsBill:view"},{    authority: "basic:driver:view"},{    authority: "admin:logs"},{    authority: "contracting:fixedCost:view"}]

我们将他存在vuex中，用的时候从vuex中获取。

创建permision.js

我们在src下创建permission文件夹。

@src/permission/inedx.js

src/permission/inedx.js

import store from '@/store'

export function hasPermission(perms) {
  let hasPermission = true 

  const un = store.getters.userName
  if (un === 'admin') {   //如果是超级管理员有一切权限
    return true
  }

  const permissions = store.getters && store.getters.perms   //就是上面获取的权限的数据

  if (permissions.length >= 0) {
    hasPermission = false
  }

  for (let i = 0, len = permissions.length; i < len; i++) {
    const authority = permissions[i].authority
    if (authority === perms) {
      hasPermission = true
      break
    }
  }
  return hasPermission
}

在页面中使用

  <el-button
        v-if="hasPerms('basic:customer:examine')"
        type="text"
        class
    >审核</el-button>
    
     <el-button
        v-if="hasPerms('basic:customer:edit')"
        type="text"
        class
    >编辑</el-button>
    
    
    //  其中‘basic:customer:examine’,basic:customer:edit 是前后端协议规定的权限标识,只有完全匹配时才会显示按钮
    
    
  import { hasPermission } from '@/permission/index.js'
  methods:{
     hasPerms: function(perms) {
      return hasPermission(perms)
    },
  }