vue 页面权限控制、按钮权限控制

简介: vue 页面权限控制、按钮权限控制

实现思路:使用自定义指令

页面权限控制

根据角色控制页面的显示——用户的角色信息,来自后台返回的用户信息的roles数组。

自定义指令 v-hasRole

使用

只有拥有admin角色的用户,才能看到的页面

按钮权限控制

按钮权限,通过后端返回的路由信息中meta的types数组决定。

按钮上添加自定义指令 v-hasPermission


拥有get 和 delete操作权限的用户,才能看到删除按钮

自定义指令 v-hasPermission

 

目录
相关文章
|
1天前
|
JavaScript
vue 下载插件downloadjs
vue 下载插件downloadjs
8 1
|
1天前
|
JavaScript
vue组件封装 —— 仪表盘(有缺口的环形进度条内显示百分比值)
vue组件封装 —— 仪表盘(有缺口的环形进度条内显示百分比值)
7 1
|
1天前
|
JavaScript
Eslint-------error ‘Vue‘ is not defined no-undef
Eslint-------error ‘Vue‘ is not defined no-undef
|
1天前
|
JavaScript
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
295 0
work02_vue页面打印水印
|
15小时前
|
JavaScript 索引
Component name “index“ should always be multi-word vue/multi-word-component-names
Component name “index“ should always be multi-word vue/multi-word-component-names
|
1天前
|
JavaScript
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
6 1
|
1天前
|
XML JavaScript 前端开发
vue实战——图标,请使用SVG!(含插件vue-svg-icon的使用)
vue实战——图标,请使用SVG!(含插件vue-svg-icon的使用)
7 1
|
1天前
|
JavaScript
vue实战--v-for 遍历渲染按钮的两种实现方案(重点:按钮点击事件的绑定技巧)
vue实战--v-for 遍历渲染按钮的两种实现方案(重点:按钮点击事件的绑定技巧)
10 1
|
1天前
|
缓存 JavaScript 前端开发
Vue之异步组件【探究 Vue 的异步组件的魔力所在】
Vue之异步组件【探究 Vue 的异步组件的魔力所在】
5 1