iview使用,iview admin二次开发
本文主要介绍iview-admin2.0自带的iview的权限管理，可以通过设置路由的元对象的参数access来分配权限。有兴趣的可以了解一下。
目录
iview-admin2.0附带正确的管理。根据权限控制组件显示自定义授权指令，并自定义授权组件摘要。
iview-admin2.0自带的权限管理
Iview-admin2.0自带权限管理，可以通过设置路由的元对象的参数access来分配权限。
的默认角色是超级管理员和管理员。现在，我们分配一个权限，只有用户可以查看文档的这个侧边栏项目。
{
路径： ，
姓名：医生，
元：{
标题：“文档”，
href: 3359 lison 16 . github . io/iview-admin-doc/#/，
图标：“ios-book”，
访问权限：[用户]
}
},
边栏不会显示文档栏。在src/store/module/app.js中获取menuList，这是侧边栏中的列表。
getters: {
menuList: (state，getters，root state)=getMenuByRouter(routers，rootState.user.access)，
错误计数：state=state.errorList.length
},
这个getter方法主要执行getMenuByRouter，然后查看src/libs/util.js找到具体的代码。
/**
* @param {Array} list通过路由表获取菜单列表。
* @返回{Array}
*/
export const getMenuByRouter=(list，access)={
设res=[]
forEach(列表，项目={
如果(！item.meta (item.meta！item.meta.hideInMenu)) {
让obj={
icon:(item . meta item . meta . icon) ，
名称：项目名称，
meta: item.meta
}
if((has child(item) (item . meta item . meta . show always))showThisMenuEle(item，access)) {
obj . children=getMenuByRouter(item . children，access)
}
if(item . meta item . meta . href)obj . href=item . meta . href
if (showThisMenuEle(item，access)) res.push(obj)
}
})
返回资源
}
const showThisMenuEle=(item，access)={
if(item . meta item . meta . access item . meta . access . length){
if (hasOneOf(item.meta.access，access))返回true
否则返回false
}否则返回true
}
至此，access的评判权限流程更加清晰。代码将获取存储在state中的用户信息，主要是access，然后与路由允许的access进行比较。如果用户的访问权限在路由访问列表允许的范围内，就会被确认，比如用户访问权限的[admin ， super_admin]，但是我们把文档的访问权限设置为[user]。
Haseof ([admin ， super _ admin]，[user])//false，认证失败。
HasOneOf是iview-admin的工具方法。用于判断要查询的数组是否至少有一个元素包含在目标数组中，详细代码放在最下面。
根据权限控制组件展示
一般我们还需要根据权限控制页面元素的显示，比如按钮。有两种方法，一种是定制auth指令，另一种是定制一个认证组件来包装要认证的元素。
自定义auth指令
Iview-admin将自定义指令放在src/directive文件夹中，directives.js文件负责引入每个文件中单独定义的自定义指令，并统一导出。我们实现了一个授权指令：
从导入可拖动内容。/模块/可拖动
从导入剪贴板。/模块/剪贴板
从导入授权。/module/auth
常量指令={
可拖动，
剪贴板，
作家（author的简写）
}
导出默认指令
然后在src/directive/index.js中导出一个importDirective方法，参数是Vue，逻辑是寄存器指令。
从导入指令。/指令
const importDirective=Vue={
/**
*拖放指令v-drag= options
*选项={
* trigger:/CSS选择器作为拖动触发器传入此处/，
* body:/需要移动容器的CSS选择器来了/，
*恢复：/拖动后是否要恢复到原始位置/
* }
*/
Vue.directive(draggable ，directive.draggable)
/**
*剪贴板指令v-draggable=options
*选项={
* value:/使用输入框中v-model绑定的值/，
*成功：/复制成功后回调/，
*错误：/复制失败后回调/
* }
*/
Vue.directive(clipboard ，directive.clipboard)
Vue.directive(auth ，directive.auth)
}
导出默认导入指令
这个importDirective方法在main.js中使用，并接受真实的Vue输入作为参数。
从“@/directive”导入importDirective
/**
*注册说明
*/
导入指令
.
编辑src/指令/模块/auth.js
从“@/store”导入商店
导出默认值{
已插入：(el，binding，vnode)={
常数值=binding.value
const access=store . state . user . access
if(access . index of(value)===-1){
el.remove()
}
}
}
我们添加一个auth命令并导出它。注射时，判断是否允许。如果确认成功，什么也不做。如果失败，删除该元素。
试试吧，以顶部的折叠菜单按钮为例，beader-bar.vue
模板
div class=header-bar
sider-trigger v-auth= admin :collapsed= collapsed icon= MD-menu @ on-change= handleCollpasedChange /sider-trigger
.
/div
/模板
当v-auth=admin 时显示按钮，如果是用户则隐藏按钮。
自定义auth组件
您还可以定制auth组件来创建一个功能组件auth.vue
脚本
从“@/store”导入商店
导出默认值{
功能性：真的，
道具：{
权威：{
类型：字符串，
要求：真
}
},
render (h，context) {
const { props，scopedSlots }=上下文
const access=store . state . user . access
return access . index of(props . authority)-1？scopedSlots.default() : null
}
}
/脚本
如果确认成功，它将返回slot否则将返回null，这样auth包装的元素就不会显示。然后把auth.vue注册成全局组件，这样就不用每次用的时候都导入了。编辑main.js
从 _c/auth/auth.vue 导入授权
//注册组件
Vue.component(Auth ，Auth)
使用时可以直接用auth包装组件。
模板
div class=header-bar
Auth authority=user
sider-trigger:collapsed= collapsed icon= MD-menu @ on-change= handleCollpasedChange /sider-trigger
/Auth
/div
/模板
总结
它可以通过基于组件的编写或用户定义的指令来实现。由基于组件的实现编写的代码更加灵活。另外，还有一个区别。如果自定义指令未能确认正确，该元素将被直接删除。因此，如果此时admin被更改为user，该元素将不会显示，因为它已被删除，并且需要刷新页面才能显示。但如果是基于组件的，就无法灵活应对。这通常影响不大。
注意，我将access设置为字符串，如果设置为数组，iview附带的hasOneOf方法可以很好地使用。
/**
* @param {Array}目标目标数组
* @param {Array} arr需要查询的数组
* @description确定要查询的数组是否至少有一个元素包含在目标数组中。
*/
导出常量hasOneOf=(targetarr，arr)={
返回target arr . some(_=arr . index of(_)-1)
}
这就是这篇关于iview权限管理实施的文章。有关iview权限管理的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。