vue权限管控permission实现

vue项目实现不同用户角色权限管控：

实现方法：Vuedirective+install+Vueuse

步骤：1 新建permissionjs 实现自定义指令的钩子方法：

前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以看看之前的基础搭建

后台返回的菜单数据（包含按钮）

思路我们已经有了，下面我们就开始进行代码的编写了。我们分成两步来实现。

1、合并所有的按钮权限到一个数组中去。

不知道大家还记不记得，在上一章我们在Adminvue页面中获取到了菜单。

下面我们就从菜单中提取按钮权限

utilsjs

这里按钮的数据我们已经获取到了，下面我们就是使用了

2、使用按钮权限

在util下创建permissionjs

在mianjs文件中调用

3、使用

用v-directive自定义指令自定义一个v-permission来根据后端返回的数据进行按钮的显示隐藏从而达到按钮权限控制

Vuedirective('permission', function(el,binding,vnode){

  consolelog(el)

  consolelog(binding)

  consolelog(vnode)

  elstyledisplay=bindingvalue === 'btn1'"none":"block"

})

el : 指令所绑定的元素，可以用来直接 *** 作 DOM 。

binding : 一个对象，包含以下属性：

               name : 指令名，不包括 v- 前缀。

               value : 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。

               oldValue : 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

               expression : 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

               arg : 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

               modifiers : 一个包含修饰符的对象。 例如： v-my-directivefoobar, 修饰符对象 modifiers 的值是 { foo: true,               bar: true }。

vnode : Vue 编译生成的虚拟节点。

用户 按回车就进入 最简单的一些命令 如ping 特权模式： 输入 enable 如sh run命令等 全局配置命令：conf t 对整个路由器产生作用的一些命令 如 ip route 路由配置模式： router eigrp 50 配置相关路由协议 端口配置模式：int s0/0 进入相关接口设置 ________________________________________ 从上至下依次为： 1 C 2 B 3 4 D 5 A

要通过Vue的前端界面修改左侧菜单栏的权限，您可以将菜单项数据存储在Vue组件的data属性中，并根据用户不同的权限来动态设置菜单的显示方式。具体步骤如下：

1 在Vue组件中创建一个data属性，用来存储菜单项的数据。例如：

```

data() {

return {

menuItems: [

{ name: '仪表盘', icon: 'el-icon-menu', path: '/dashboard', canView: true },

{ name: '用户管理', icon: 'el-icon-user', path: '/users', canView: false },

{ name: '文章管理', icon: 'el-icon-document', path: '/article', canView: true }

]

}

}

```

2 使用v-for循环渲染menuItems数组中的菜单项，并使用v-if根据canView属性动态设置菜单项的显示方式。例如：

```

<el-menu>

<el-menu-item v-for="item in menuItems" :key="itempath" v-if="itemcanView">

<i :class="itemicon"></i>

<span slot="title">{{ itemname }}</span>

</el-menu-item>

</el-menu>

```

在这个示例中，只有canView属性为true的菜单项才会被渲染出来。

3 在Vue组件的methods属性中添加一个方法，用来在界面上修改菜单项的权限。例如：

```

methods: {

changeMenuView(item) {

itemcanView = !itemcanView;

}

}

```

在这个示例中，changeMenuView方法会根据传入的菜单项item对象的canView属性值进行取反 *** 作，实现菜单项权限的修改。

完成上述 *** 作后，您就可以通过界面修改菜单项的权限，从而实现动态显示和隐藏的效果。这种方法可以使应用程序更加灵活，便于根据用户角色对菜单进行动态控制。

以上就是关于vue权限管控permission实现全部的内容，包括:vue权限管控permission实现、VUE3 你不知道的按钮与菜单权限、vue项目中的按钮权限配置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！