vue 项目中使用v-permission 实现按钮级权限控制

在使用 vue-element-admin 框架进行开发时，您可以通过自定义指令来实现按钮级的权限控制。这个自定义指令可以根据用户的权限动态地控制按钮的显示。以下是一个详细的实现步骤：

1、在 src 目录下按照如下目录结构，创建一个权限文件，例如 permission.js：

目录结构：src/directive/permission/permission.js

// src/directive/permission/permission.js

import store from '@/store'

export default {
  inserted(el, binding) {
    const { value } = binding
    const roles = store.getters && store.getters.roles

    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value

      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })

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

2、在同个目录下创建一个指令注册文件，例如 index.js：

目录结构：// src/directive/permission/index.js

// src/directive/permission/index.js

import Vue from 'vue'
import permission from './permission'

Vue.directive('permission', permission)

3、在 main.js 文件中引入并注册这个指令：

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import '@/directive/permission' // 引入权限控制指令

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

4、在组件中使用自定义指令：

在任何需要权限控制的地方使用 v-permission 指令。例如：

<template>
  <div>
    <button v-permission="['admin']">Admin Button</button>
    <button v-permission="['editor', 'admin']">Editor or Admin Button</button>
  </div>
</template>

<script>
export default {
  name: 'PermissionExample'
}
</script>

5、确保在 Vuex Store 中有 roles 的 getter：

// src/store/getters.js

const getters = {
roles: state => state.user.roles
// 其他getters...
}
export default getters

并确保在 src/store/modules/user.js 中有 roles 的状态：

// src/store/modules/user.js

const state = {
  roles: []
  // 其他状态...
}

const mutations = {
  SET_ROLES: (state, roles) => {
    state.roles = roles
  },
  // 其他mutations...
}

const actions = {
  // 其他actions...
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

6、在用户登录后设置用户的权限：

// src/store/modules/user.js

const actions = {
  // 登录后获取用户信息，包括权限
  async getUserInfo({ commit }) {
    // 假设从 API 获取用户信息
    const { roles } = await api.getUserInfo()
    commit('SET_ROLES', roles)
  }
  // 其他actions...
}

通过上述步骤，您可以在 vue-element-admin 项目中实现按钮级的权限控制。每个按钮根据 v-permission 指令动态显示或隐藏，确保只有拥有相应权限的用户才能看到和操作这些按钮。

 

5.6 就是确保用户登录后，将角色清单存储在store中的。然后验证时，从store中获取。

 

注我的个人公众号，每日更新，获取更多技术知识