主要介绍了VUE前端按钮权限控制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在用户登陆后，根据用户id读取用户的所有权限数据，放入本地的storage进行存储，之后，定义指令，如果用户含有此按钮权限，则在页面显示出来： /**权限指令**/ Vue.directive('has', { bind: function(el, binding) { if (!Vue.prototype.$_has(binding.value)) { el[removed].removeChild(el); } } }); //权限检查方法

前言 在一个项目中，一些功能会涉及到重要的数据管理，为了确保数据的安全，我们会在项目中加入权限来限制每个用户的操作。作为前端，我们要做的是配合后端给到的权限数据，做页面上的各种各样的限制。 需求 因为这是一个工作上的业务需求，所以对于我来说主要有两个地方需要进行权限控制。 第一个是侧边菜单栏，需要控制显示与隐藏。 第二个就是页面内的各个按钮，弹窗等。 流程 1、如何获取用户权限？ 后端（当前用户拥有的权限列表）-> 前端（通过后端的接口获取到，下文中我们把当前用户的权限列表叫

思路： 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。 权限验证：通过token获取用户对应的 role，自定义指令，获取路由meta属性里btnPermissions( 注： meta.btnPermissions是