循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制

GetGrantedFunctionsByUser(id) { // 获取用户权限列表
    return request({
      url: this.baseurl + 'GetGrantedFunctionsByUser',
      method: 'get',
      params: { id }
    })
  }

SET_PERMITS: (state, permits) => {
    state.permits = permits
  }

// 获取用户信息
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      user.getInfo(state.userid).then(response => {
        const { result } = response
       
        ....................
        commit('SET_ROLES', { roles, roleNames })
        commit('SET_NAME', name)
        commit('SET_INTRODUCTION', fullName)
        // 获取用户权限
        user.GetGrantedFunctionsByUser(state.userid).then(data => {
          var list = data.result.items
          if (list) {
            var permits = []
            list.forEach(element => {
              if (element && element.name && typeof (element.name) !== 'undefined') {
                permits.push(element.name.toLowerCase()) // 小写
              }
            });
            // 设置用户功能权限点
            commit('SET_PERMITS', permits)
          }
        })
        resolve(result)
      }).catch(error => {
        reject(error)
      })
    })
  },

<el-row style="float:right;padding-bottom:10px">
      <el-button icon="el-icon-search" type="primary" size="mini" round @click="search()">查询</el-button>
      <el-button icon="el-icon-refresh-left" type="warning" size="mini" round plain @click="resetSeachForm('searchForm')">重置</el-button>
      <el-button v-permit="['User/add']" icon="el-icon-plus" type="success" size="mini" round @click="showAdd()">添加</el-button>
      <el-button v-permit="['User/import']" icon="el-icon-upload2" type="warning" size="mini" round @click="showImport()">导入</el-button>
      <el-button v-permit="['User/export']" icon="el-icon-download" type="warning" size="mini" round @click="showImport()">导出</el-button>
    </el-row>

import permit from './permit'
const install = function(Vue) {
  Vue.directive('permit', permit)
}
if (window.Vue) {
  window['permit'] = permit
  // eslint-disable-next-line no-undef
  Vue.use(install)
}
permission.install = install
export default permission

// 全局引入并使用权限控制点的自定义指令
import permission from './directive/permission'
Vue.use(permission)