如何用 Vue 实现前端权限控制(路由权限 + 视图权限 + 请求权限)

作者/分享人:雅X共赏
向 Ta 提问
五年前端从业者,从切图仔到架构师,练就一身丰富的踩坑经验;Flow-UI组件化框架作者;HybridStart混合应用框架作者。

随着前后端分离架构的流行,权限控制这个曾经陌生的话题开始进入很多前端同学的视野,作为一名前端,可能部分同学会认为权限是后端的事,其实这个想法是片面的,后端是权限控制的最后一扇门,而在这之前,做好前端权限控制至少有以下几个原因:

  1. 通过控制路由和请求,将越权请求拦截在前端,避免服务器承受不必要的压力,降低运营成本;
  2. 根据权限合理展示前端界面,避免对用户造成使用上的困扰,提升产品体验。

Vue 是目前最流行的前端框架之一,当我们用 Vue 开发系统类或任意类型拥有多角色的项目时,前端权限控制是绕不过去的基础功能,本场 Chat 中我将为大家分享一套做权限控制的方式方法,内容包括:

  1. 权限控制的整体实现思路
  2. 如何实现动态路由
  3. 如何实现按钮权限
  4. 如何实现请求权限

适合所有对前端权限控制感兴趣的同学,欢迎报名参加。

已有500人预订
预订达标
文章出炉
交流日期
     
17.12.03
17.12.11
17.12.19 20:30
查看文章评论/提问
辛德瑞拉
卧槽?花钱买的就写了个这?网上copy来的吧,一大堆一毛一样的。坑子
雅X共赏: @辛德瑞拉 这位同学,这次Chat介绍的是我自己整理的一套权限控制方案,而且这个方案是开源的,整个思路的从无到有我也都分享在博客里了,所以你之前看到过相同的内容是有可能的。 但是,我之前的分享(也就是你网上看到的那些)重在思路,很多实现细节都一笔带过了,对基础稍差的同学不太友好,所以这次Chat我更系统的汇总了整个实现思路,也对很多细节进行了详细说明,也附上了项目源码和演示地址,最后还将针对大家可能存在的问题,进行相对及时的线上答复和讲解(当然得在我的能力范围之内),让对这块有疑问的同学能少走点弯路,少踩点坑。 当然,可能因为我能力有限或其他原因,如果你仍然觉得这次Chat的内容质量低于你的预期,请私下联系我,我个人为你退款,但我坚决不接受你对我文章原创性的指控。
昨日の星屑
视图权限控制那一块我有一点疑问. 使用directive的方式,确实能在首次渲染的地方移除element,但是针对那种不可重用的列表渲染(v-for的key都不一样),这个时候v-if和directive貌似就没啥区别啊,计算次数是一样的.
胆小咯
写的很好,之所以跟网上的一样,因为网上就是本文作者写的。。。
~zZhao
怎么github打开是404
雅X共赏: GitHub地址没错,确定不是你输错了?
Léon
希望能出一个更加符合实际业务需求的案例,比如数据双向绑定(后台管理删除用户,当前用户点击涉及权限的内容后跳转登录)或比如用户扫描二维码注册会员时如何配合后台在路径地址中添加来由参数,实现原理基本都知道,但对具体的实现还有些疑问,上文中的内容更多是原理,Demo的参考价值不是很大,希望能更进一步。
wmhello
对于视图元素的显示控制这一块还不太理解,作者能否更详细的讲述下
Null
Demo参考价值不大
你可能还喜欢
哪些算法和数据结构是需要程序员必须掌握的?
zhen.guo
ACT 敏捷教练培养体系
Chat 三人行
Spring Cloud Consul 从入门到精通
如梦技术 dreamlu
技术部门 Leader 与团队那些事
Eason
Spring Data JPA 晋级提升篇:复杂场景实战用法与优化
张振华
高并发、高性能 Web 架构解决方案
Array老师
微信扫描登录