做网页初学者教程seo培训费用

权限管理的理论

首先需要两个页面支持，分别是角色管理和员工管理，其中角色管理对应的是角色和权限的配合，员工管理则是将登录的员工账号和员工所处的角色进行对应，即通过新增角色这个概念，让权限和员工并不直接关联，而是通过分别和角色进行关联从而实现给员工分配权限。

菜单和按钮的权限管理

菜单的权限控制

通过对后台返回的数据进行vuex中的存储，然后将权限与路由中的动态规则进行比对，筛选出对应的动态规则，然后将这些规则与静态规则合并，从而实现路由的权限控制，然后通过将完整的路由规则存入到vuex中，在菜单的展示界面渲染vuex中存储的完整的路由规则，来实现界面上我们看到的菜单的权限控制。

这里有几个细节，我们在获取用户权限的时候有两个时机可以选择，一个是用户登录时，另一个是路由的beforeEach时，考虑到更好的时效性（更容易得到修改权限后，用户展示的菜单和按钮权限在界面上立即可以看到），我们选择在beforeEach的时候请求这个接口。

还有就是我们在拆分权限的时候，将其拆分成一级路由对应的权限以及二级路由对应的权限，这里面用到了数组去重的Array.from(new Set(某个数组)) 这样的操作。然后我们根据去重后的结果，使用一级的权限去筛选符合条件的动态路由，然后用二级的权限去筛选被筛选过的动态路由，从而得到我们要的路由。

这里获取二级的权限的时候的字符串拼接，是写成return `${arr[0]}:${arr[1]}`，即中间还有一个:，这个是和我们设计的动态路由的permission字段相对应的。我们的二级路由也是写成xx:yy这样的形式。

这里就是我们最终得到动态路由的地方，其中需要注意的就是我们的路由规则应该是完整的，所以我们最后return的是return {...item,children:(){}}，即我们将item返回了，我们只修改了符合我们要求的children，这个写法很聪明。

然后就是动态添加路由规则，用的方法是router.addRoute()，完整写法是routes.forEach(item=>router.addRoute(item))

上面这种是添加到路由规则中，还需要我们对菜单进行调整

通过在vuex中进行响应式数据的设置，然后替换掉菜单的数据获取，从而实现菜单的响应式数据展示。

按钮的权限控制

通常常用的是通过vue的全局指令vue.directive('指令名',{

//钩子函数

bind(el,binding){},

inserted(el,binding){

//代码内容

}

})

按钮的权限控制，除了需要返回的权限以外，还需要后台返回一个全部的按钮权限。然后我们通过全局指令来对按钮进行操作，使得登录用户具有权限的按钮能够展示，这个一般是可以通过全局指令的钩子函数中的el.remove()来进行元素的移除。