大家再做后台管理的时候，首先要考虑的就是权限问题，即根据不同的角色显示不同的页面，下面就让我们来讨论一下如何来实现权限管理。
大体思路
所谓的根据不同的角色显示不同的页面，也就是根据不同的角色渲染不同的路由，顺着这个思路，我发现我们需要跟后端约定一个枚举值代表不同的角色，这个跟后端约定在登录的时候返回，然后根据这个字段来渲染不同的路由。
代码基于 GitHub - wangkai123456/learnVueAdmin
跟后端进行讨论
假设我们的系统分为A角色（只能查看A页面）、B角色（只能查看B页面）、root角色（可以看全部页面），需求方要求home页面为所有权限都可以显示的页面，和后端约定在登录后返回的请求题里面增加一个roleType字段，值可能为A、B、root，分别代码相应的权限。
登录方法的实现
假设账号aaa为A角色的账号,bbb为B角色账号，除那里两个之外随便输入或者不输入都是root账号，在登录成功之后把roleType这个字段相应的值存到localStorage里面，然后跳转到home
登录页面
编写渲染导航栏的静态数据
登录成功后我们就可以拿到roleType这个字段，根据之前和后端的约定我们需要对导航栏进行过滤。在这之前我们已经在assets/js 这个文件里新建了一个sideNavigationPath.js 文件，由于我们使用的是element-ui的组件，所以这里我们根据这个组件需要的数据格式把我们现有的路由页面在这里进行相应编写
导航栏静态数据
过滤数据
由于之前我们编写的sideNavigationPath里面是所有的页面的数据，所以我们需要根据roleType这个字段进行过滤，过滤完成后进行渲染注意可能会出现二级菜单的情况，我们认为只有二级菜单的上级菜单出现那么他就会出现，二级菜单本身不做权限管理（如果要做的话，就要改一下过滤方法改成递归，如果确定菜单最多二级的话在套一层循环也行）
过滤数据
渲染导航栏
导航栏渲染
总结
通过以上几步的讲解就可以完成一个基础的对路由的权限管理，总体来说首先我们要跟后端确定字段，然后编写一个静态文件，然后根据和后端确定的值进行过滤，然后根据数据格式进行先渲染。这些是只是一个项目最开始的样子，比如：文件模块的划分、数据存入vuex、路由细致化管理等等，以上代码只是帮助大家迅速了解权限管理前端应该怎么做，更细致的实现后面会有新的探讨。
网友评论