Vue简单权限管理(思路)

权限控制分为两大部分

1、接口访问的权限控制
2、页面的权限控制

• 菜单中的页面是否能被访问 (页面级访问权限)

• 页面中的按钮（增、删、改）的权限控制是否显示 （数据级操作权限）

页面级访问权限

目前只学习到页面级访问权限

        思路

                在用户登录之后，通过请求后台查找该用户的权限信息，然后返回到前端权限列表
        前端拿到权限列表之后，动态配置路由，再生成出对应的菜单列表。

                用户的权限是通过前端来进行配置的，那么就需要一个权限管理模块去进行用户的权限配置。权限管理就会有以下几个子管理模块：

1、用户管理  --》 分配角色
2、角色管理  --》 设置角色
3、权限管理  --》向不同角色分配不同权限（模块）
4、模块管理  --》模块名，路由path，路由name，引入组件地址componentPath，是否在菜单显示isShow，父id 层级关系 

                前台权限配置模块就大致是这样。

        权限实现 

                根据分配的模块，后台返回的权限列表（数组形式，对象数据，树状数据，根据层级关系，菜单信息套子菜单信息），然后，用vuex和sessionStorage存起来，再根据存起来的模块数据动态添加路由，以及动态生成菜单。

                动态路由：

将权限数组里的数据解析，重新组成对象：

{
    path: item.path,
    name: item.name,
	component: resolve => require(['@/views/' + item.componentPath + ''], resolve)
}

 再依次存进一个新数组，这个数组就是路由数组

最后使用vue提供的一个方法router.addRoute()将这个路由数组里面的路由依次添加

                渲染菜单：

 菜单也是用到了element-ui的菜单。主要就是用v-for循环模块数组，用v-if判断是否有子菜单和是否在菜单显示。

总结 

        最后，这只是一个大致的思路，后面会具体展开写一篇文章