1.前言你所不知道的前端之一——中后台系统的权限控制大体上可以分为两类，页面权限vs.按钮权限。如果说编程的职业道路就像是在游戏中打怪升级，那么练级这个分支首先要面对的说服boss就是权限控制。这篇文章适合什么样的读者？本文适合新手玩家，或者手残党，即将进入本分支（中后台），以及各种高手，运营党，欧皇党（坐家里，嗯，项目完成！）和其他童鞋吃。食用过程中，如有不适，敬请谅解。看完这篇文章你能学到什么？对前端的权限控制会有更深的理解。晚饭后有空的时候，看看这个故事。你是怎么写这篇文章的？是我微不足道（6个月）的经验和对中后台系统的理解，以及一些开源的中后台系统方案，然后自己消化和描述。在后面的章节中，我将以轻松易懂的例子相辅相成。2.概念介绍玩游戏，是不是要先了解游戏的背景、设定、技能、人物等？主要是这三个东西：1.中后台系统2.权限控制3.Vue-router本文基于Vue。2.1中后台系统我们知道，中后台系统也叫中后台管理系统。既然有管理两个字，权限控制必不可少。让我们来看看它的一些功能。后台系统主要由大量的窗体、表单、弹窗、按钮组成。（开发过的童鞋你懂的）中后台系统主要是给一些政府或非政府部门、单位、企业用的，也就是说是给B端用的。中后台系统页面的主要布局是左边的sideBar（菜单页），最上面的header（面包屑，网站标题，logo，用户中心），中间的AppMain（主页面展示）。鬼兽画风目前中后端系统的开发模式应该是瞬移（前后端分离的模式），应该没有有用的腿跑图（远古级别）。2.2权限控制前面几章介绍了对中后台系统的一些基本认识，接下来讲权限控制。2.2.1权限控制的分类权限控制可以分为以下两类：1.页面权限2.按钮权限2.2.2什么是权限控制？既然是管理系统，肯定有不同的权限。例如：你去图书馆借书，你有借书权限，图书馆工作人员有管理图书和借出图书的权限。这样的话，按照游戏模型，你是一个技能，图书馆员是多个技能，这就是权限的区别。回到正题，在中后台系统中，最明显的权限控制就是页面的控制，也就是说，在左侧的sideBar中，管理员有30个菜单页面可以点击，而普通用户只有10个可以点击菜单页面。那么这一步怎么做，页面权限怎么控制呢？2.2.3小怪挡路的页面权限控制（以功能点为切入点）具体实现的功能有哪些？以上一章为例：管理员有30页（通行费30金币），普通用户只有10页（通行费10金币）。很清楚，不是吗？只要我们意识到以上两点，就ok了。嗯。哦对了，我们继续。很简单，我们用两个钱袋子（变量）分别存放这些金币。如果管理员小boss挡路，我们就把准备好的30金币小包拿出来给他；如果它只是一个小兵，那就给它10金币的袋子吧。具体对应的页面和路由我们先不讨论，只对功能点做一个判断。我们成功解决了第一关，名字是：小怪挡路。然后下去探索吐哈。2.2.4挖宝石关卡（按钮权限列表）过了上面小怪挡路的关卡后，是不是感觉自己的大剑又饿又渴，忍不住拿出来打磨。别着急，我们想发财先挖路吧。呸！！不，先挖宝石。假设你进入一个满是宝石的房间，房间的每个角落都埋藏着许多价值连城的宝石。如果你拥有一个，你可以变得富有。抑制不住激动的心和颤抖的手！！！（房间很大，光线不足）这时候房间的机关突然被你触发了。一阵机械齿轮声后，你以为自己应该挂了，没想到，你在挂在墙上的破二锅头瓶里突然冒出一缕青烟，还没来得及动手，青烟就变成了一个凌乱的老者，露出缺了一颗门牙的大嘴，诡异地笑道：“小子，你是谁？”'.正要回答，‘……，我想起来了，来这里的都是贪婪的人，想把宝石挖走，小子，这要看你的运气了，运气好的话，可以拿走。走一些，坏的，呵呵……陪着我！‘老头儿歪着嘴嘲笑你，然后就消失了……你开始迷糊了，但欲望让你的肾上腺素飙升，心跳加快，因为在你面前不远处有一块蓝色的大夜光宝石。你蹲下来捡起来，用双手抓住，可是怎么使劲，石头就是提不起来。过了一会儿，你满脸通红，大汗淋漓，精疲力尽，气喘吁吁，你用屁股倒在地上，大口喘气。突然，爆发出一阵笑声，“哈哈哈，笨蛋，笨蛋……”你被这笑声气坏了。你不知道哪里来的力量。你伸出手，抓住了一样东西。击中那个笑声！'撞！‘笑声戛然而止，你仰着头倒在地上，喘着粗气，休息了许久，起身走到刚才笑声所在的地方，临走时，你看到地上是空的，除了一朵绿花。宝石流淌着难以形容的颜色光芒，像鸽子蛋一样躺在地上。捡到之后突然明白了一个道理：1、你刚才捡到的东西是宝石（幸好没丢）2、为什么蓝色的宝石捡不到？(激动)3.为什么这个可以捡到的宝石，它的颜色……(um*)开始分析，蓝色的宝石可以看到但是不能捡到，其实对应的是一个可以捡到的按钮可见但不能点击（禁用状态）。蜜绿色宝石，对应另一个按钮，可以看到并可以点击（触发事件）。至于它的颜色，嗯……我无法解释，只有一句话：要想活得好，头上一定要有一点绿色。刚捡到这颗宝石没多久，又是一阵“机械齿轮转动的声音”，一道光柱直接出现在你的面前，顺着光柱看去，发现是一扇门。就在你犹豫要不要走过去的时候，身体突然被什么东西撞了一下，掉到了门外。还没等你再站起来，门就‘砰’的一声关上了！你站起来，转头看向门口。这扇门是一扇老式的木门，上面贴着一张纸：最后一批：欲望之门。内容：人的欲望被关在这扇门后，那些五颜六色的宝石就是每个人当下的欲望。可以捡到的宝石，可以通过努力获得；得不到的，是自己没有能力却又贪得无厌、渴望得到的；而最可怕的是无边无际的黑暗，是你无尽欲望中最黑暗、最深沉的恐惧。分析这篇论文的内容，分为三个角度，分别对应：1.具有点击权限的按钮（按钮可见，可以触发事件）；2.没有点击权限的按钮（页面渲染了这个按钮，但是你不触发事件）；3.无底洞的恐怖（没有查看和点击权限的按钮）故事好像太多了，哈哈，稍后我会出一个专栏专门介绍完整的故事。2.3页面权限从现在开始，解释代码！2.3.1从前端路由开始，首先要了解路由——vue-router。要点：globalpre-guardrouter.addRoutesglobalpre-guard可以使用router.beforeEach注册一个全局pre-guardconstrouter=newVueRouter({...})router.beforeEach((to,from,next)=>{//...})使用全局pre-guard作为拦截器，拦截每一次路由跳转变化，判断用户是否登录，token是否存在，再进行下一条路由。否则，自动跳转到登录页面。addRouters//函数签名router.addRoutes(routes:Array
