关于vue权限管理的坑。。

一直在搞管理系统。因为开始的突然，所以并没有用 vue-admin 直接用脚手架build 了项目。但是产品吐槽太丑了，所以又把admin 的左边路由显示拿过来，头部信息拿过来，尽量让产品说我做的并没有那么丑。。

开始产品的需求只要简单的控制一下用户左侧路由显示就可以了，所以我只是把左边的按后端登录返回的用户角色简单的区分，显示所有，不包含后两个的菜单。只包含后两个的菜单。 什么好用用什么。我就想到了。数组的方法 slice。很好用，只要把新加的功能放在倒数第三个。就可以满足了。

这样就到达了2.2.0版本，要求整体的权限管理。因为权限这个东西我以前没有接触过，后端也不是很熟。所以就把这个版本搁置了一下。变成了在别的版本之后的优先级很低的功能。但是有时间就要搞。但是。因为以前有项目已经是同样的vue 路由权限。所以我刚好吧以前的拿过来直接用。很简单的把里面的配置完成，长这样。

里面的因为是直接拿来用，但是后端并不是，所以就把参数按我需要的，和现在返回的name重写了一遍。后端的大神说咱们这个按产品截图（在这就不得不吐槽产品了，因为以前有，就吧每一个页面给大致截图了一遍）功能不能够咱们的需求。这个还是很复杂的，所以经过和后端的交流之后。新增加了几个功能

不得不说，后端果然见多识广，因为是全站工程师，所以前端的也很懂。第一个功能是我们可以把前端的路由直接按照规范的json 直接导入。既可以刷新以前的。又可以增加新的。在登录的时候就会返回给我。非常牛的功能。第二个就是在我增加失误的时候可以调整权限的位置。这就更好啦， 这样就避免了重复增加。

在里面的功能都完成之后。我们就开始了整理动态路由了。在版本更新的同是弄路由，真的是浪费了好多时间。整体感觉就是在不停的切版本。不停的切。还好基本已经弄完了，很开心。

动态路由其实我以前稍微解除了一点。迷迷糊糊的弄了百分之60 之后。告知我，不用弄了。所以又把以前的拿过来，接着用。毕竟我不是代码的开发者，我只是代码的搬运机。

因为我觉得权限最让我头疼的就是动态路由了，并且以前已经有过经验（半吊子）所以开始和后端说我需要的东西。然后要求他给我返回我需要的东西。因为以前并么有按照规范起名字。name也不是很规范，当他只返给我一个path 的时候我突然被动了，所以又把所有的文件名按照path改了一下

重点1.要按照规范起文件名字 + path + url

返回之后按照以前的方法，重写了一下，变成了和路由一样的，之后，添加路由油报错了。为什么？因为路由。。。。

具体我原理是真的不是很懂，结果是路由啊。不能直接修改，只能在store里面修改，所以只能用 vuex 来动态添加，本来我是和后端说，在登录之后吧用户权限信息直接给我就行，但是！因为 store 刷新就会丢失，所以我只能在丢失后重新获取到路由。之后从新添加给路由。所以又牵扯到一个知识点。什么时候去刷新路由？怎么判断么有路由了。这会就要在router里面判断了

路由拦截

所以呢。这个当然也不是我写的，但是我经过不断的遭遇bug 不断的console.log 完成了我拦截。

路由修改

当我把路由输出之后。就开始要往router里面添加了。之后就是

获取权限之后再 store 里面 add 新的路由 因为逻辑已经写好了，所以没有修改直接按照以前的走了，这一步主要有用的就是存储的router

之后呢，现在应该已经有动态路由了，输出router也有了，但是！左侧根据路由来的菜单并没有。原因我也不是很清楚，但是，结果就是需要在左边栏再手动添加一次router

在left 里面添加动态路由

因为这个问题困扰了很久真的，幸好找到了方法。

之后当我在点击左侧的时候。终于！获取到了左边栏。但是又出了一个bug 我再登陆之后跳转首页。是我写在固定的路由。白名单里面的。所以他没有添加动态路由。左侧还是没有显示。所以我又把首页也当做权限导入后。发现。可以了。前面说道因为我没有按照规范起名。所以在添加动态路由时候，文件名不匹配。找不到文件发生了好多次（我哭了）

就当我觉得已经完美的时候，bug又来了。。。因为开始的时候后端说。要加token。我就加上了，但是他没有用，让我每次给他传过去，所以当他整体都加在header 里面的时候，我又慌了，每次传的都是上次存的，而不是这次存的。所以，很绝望，网上找了，说是封装的axios 异步吗。不能每次获取到新的。所以解决方法就是存在vuex里面。 在请求之前赋值一下

在里面获取

ps 不能写在外面。因为外面获取不到store 是 undifine ，这问题也困扰我了。当然解决方法也是在别的项目搬运过来的。我觉得我的学习方式就是不断地复制粘贴

到此。基本完成。呼~ 累死我了，再次吐槽一下产品：竟然就靠几张截图完成了权限管理的说明文档。