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

  GetGrantedFunctionsByUser(id) { //获取用户权限列表
    returnrequest({

      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-rowstyle="float:right;padding-bottom:10px">
      <el-buttonicon="el-icon-search"type="primary"size="mini"round @click="search()">查询</el-button>
      <el-buttonicon="el-icon-refresh-left"type="warning"size="mini"round plain @click="resetSeachForm('searchForm')">重置</el-button>
      <el-buttonv-permit="['User/add']"icon="el-icon-plus"type="success"size="mini"round @click="showAdd()">添加</el-button>
      <el-buttonv-permit="['User/import']"icon="el-icon-upload2"type="warning"size="mini"round @click="showImport()">导入</el-button>
      <el-buttonv-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

exportdefault permission

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