模板网站很牛,甘肃网站seo推广,辽宁建设工程信息网直接发包代理机构流程,临海最火自适应网站建设权限管理
角色:一家企业而言#xff1a;BOSS、运维、销售、程序员
权限:超级管理员#xff08;BOSS#xff09;#xff0c;是有权利操作整个项目的所有的模块 test#xff08;新媒体#xff09;#xff0c;只能首页、商品管理者一部分菜单数据 admin#xff1a;…权限管理
角色:一家企业而言BOSS、运维、销售、程序员
权限:超级管理员BOSS是有权利操作整个项目的所有的模块 test新媒体只能首页、商品管理者一部分菜单数据 admin超级管理员-----boss
权限管理用户管理、角色管理、菜单管理 由于用户管理、角色管理、菜单管理对于获取数据、展示数据、收集数据
首先搭建权限管理的静态界面 然后去路由当中去配置权限 export const asyncRoutes [{name: Acl,path: /acl,component: Layout,redirect: /acl/user/list,meta: {title: 权限管理,icon: el-icon-lock},children: [{name: User,path: user/list,component: () import(/views/acl/user/list),meta: {title: 用户管理,},},{name: Role,path: role/list,component: () import(/views/acl/role/list),meta: {title: 角色管理,},},{name: RoleAuth,path: role/auth/:id,component: () import(/views/acl/role/roleAuth),meta: {activeMenu: /acl/role/list,title: 角色授权,},hidden: true,},{name: Permission,path: permission/list,component: () import(/views/acl/permission/list),meta: {title: 菜单管理,},},]
},
{path: /product,component: Layout,name: Product,meta: { title: 商品管理, icon: el-icon-goods },children: [{path: trademark,name: TradeMark,component: () import(/views/product/tradeMark),meta: { title: 品牌管理 }},{path: attr,name: Attr,component: () import(/views/product/Attr),meta: { title: 平台属性管理 }},{path: spu,name: Spu,component: () import(/views/product/Spu),meta: { title: Spu管理 }},{path: sku,name: Sku,component: () import(/views/product/Sku),meta: { title: Sku管理 }},]
},
{path: /test,component: Layout,name: Test,meta: { title: 测试管理, icon: el-icon-goods },children: [{path: test1,name: Test1,component: () import(/views/Test/Test1),meta: { title: 测试管理1 }},{path: test2,name: Test2,component: () import(/views/Test/Test2),meta: { title: 测试管理2 }},]
},
]; 然后就是相关权限的请求 这里有一个问题那就是路由的配置为什么不同用户登录我们的项目菜单路由都是一样的
因为目前的路由是死的不管你是谁看到的操作的都是一样的 活着的路由指的是根据不同用户角色可以展示不用菜单
如何实现菜单的权限不同的用户所能操作|查看菜单不一样的
起始不同的用户角色登录的时候会向服务器发请求服务器会把用户相应的菜单的权限的信息返回给我们 我们可以根据服务器返回的数据信息可以动态的设置路由可以根据不同的用户展示不同的菜单。
回到登录界面 发现登录事件跟派发的action有关查看vuex 这个data打印出来就是服务器返回来的数据
其中包含了用户名name 用户头像avatar router[返回的标志不同的用户应该展示那些菜单的标记] roles(用户角色信息) button 【按钮的信息按钮权限用的标记】
而我们这里的模板只存了用户名和头像这个明显是不完整的将他修改完整 菜单权限:当用户获取用户信息的时候服务器会把相应的用户拥有菜单的权限信息返回需要根据用户身份对比出当前这个用户需要展示哪些菜单
当用户登录的时候服务器端会返回相应角色的菜单权限的信息 只不过返回信息是一个数组routes--[sku,spu,produt]
然后回到router当中把项目中的路由进行拆分
我们需要拆分出
常量路由就是不管用户是什么角色超级管理员普通员工都可以看见的路由例如登录404首页
异步路由不同的角色需要过滤选出的路由称之为异步路由
任意路由当路径出现错误的时候重新定位到404 然后根据这三种路由根据不同情况进行筛选
服务器返回来的路由信息跟我们的异步路由进行对比判断是否显示
回到vuex中 先把异步路由引入进来 定义一个函数俩个数组进行对比对比出当前用户到底显示那些异步路由
但我们这些操作只是vuex保存当前用户的异步路由注意一个用户需要展示完成路由常量异步任意路由因此我们需要计算出当前用户展示的所有路由 1.首先需要将这三个路由先引入进来 2.在state中招一个变量用来存储它 3.算出当前用户展示的所有路由 展示出了所有需要展示的路由但是左侧依旧还是一样这个是因为我们在路由当中设置的是把常量路由写死的 因此我们需要添加新的路由 1.先引入router
2.给路由器添加新的路由 但并没有效果这个是因为这个模板取的只有常量路由 到这里就完成了菜单的权限
之前权限界面无法显示这个是因为接口有问题只需要添加/dev-api即可 显示成功
按钮权限
菜单权限不同的用户角色能操作、能观看的菜单是不同的。 按钮的权限不同的用户角色有的用户的是可见按钮、当然有的用户不可见。 vue elementUI tree树形控件获取父节点ID的实例修改源码:情况1: element-ui没有实现按需引入打包node_modules\element-ui\lib\element-ui.common.js 25382行修改源码 去掉 includeHalfChecked // if ((child.checked || includeHalfChecked child.indeterminate) (!leafOnly || leafOnly child.isLeaf)) {if ((child.checked || child.indeterminate) (!leafOnly || leafOnly child.isLeaf)) {情况2: element-ui实现了按需引入打包node_modules\element-ui\lib\tree.js 1051行修改源码 去掉 includeHalfChecked // if ((child.checked || includeHalfChecked child.indeterminate) (!leafOnly || leafOnly child.isLeaf)) {if ((child.checked || child.indeterminate) (!leafOnly || leafOnly child.isLeaf)) { 为什么给了测试管理的权限左侧菜单却没显示“测试管理”。因为没这个路由组件所以建一个就有了 先写相应的组件
然后配置异步路由 效果实现 v-show$store.state.user.buttons.indexOf(btn.Add1)!-1
通过这种方式可以实现对按钮权限的控制
完整效果展示 完整项目如下
Chicksqace/vue_project at Branch_088eb50c (github.com)
记得切换分支到Branch_088eb50c当中
