vue2.x 权限管理实现

最新推荐文章于 2024-07-01 09:54:39 发布

胖鹅68

最新推荐文章于 2024-07-01 09:54:39 发布

阅读量1.3k

点赞数

文章标签： javascript json ViewUI

本文链接：https://blog.csdn.net/hbiao68/article/details/84908923

版权

本文介绍了一种在Vue2.x中进行权限管理的方法，详细阐述了从资源命名规则制定、资源信息整理到使用VUE全局指令或插件实现按钮级别的权限控制的开发步骤。

摘要由CSDN通过智能技术生成

由于工作的需求，前后端分离，需要对页面中的资源权限控制，到按钮级别。

开发步骤：

1、制定资源的命名规则：系统名—模块名-页面名-功能名

2、收集各个页面所有需要管控按钮的资源，用一个excel来整理

3、让负责各个模块的同事把相关的资源按照如下要求去写：

<Button @click="isEdit = false" v-privilege  privilegeId="sysManage_dept_deptInfo_edit">退出编辑</Button>

备注：

a. v-privilege 表示是使用的指令

b. privilegeId 表示资源的唯一标识

4、定义一个VUE的全局指令privilege，防止其他页面找不到相关指令报错

// 注册一个名为 v-focus 的全局自定义指令
Vue.directive('privilege', {
// 当绑定的元素插入到 DOM 时调用此函数……
  inserted: function (el) {
    // 获取 localStorage 的权限，是一个JSON 对象
        var privilegeMapStr = localStorage.getItem('privilegeMapStr');
        var privilegeMap = JSON.parse(privilegeMapStr);
        // 获取资源的唯一标识