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

页面权限控制

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

自定义指令 v-hasRole

vue 页面权限控制、按钮权限控制_自定义指令

使用

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

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

按钮权限控制 

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

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

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

vue 页面权限控制、按钮权限控制_数组_04

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

自定义指令 v-hasPermission

vue 页面权限控制、按钮权限控制_数组_05