vue菜单权限和路由权限,vue路由权限怎么做
本文主要介绍了某视频剪辑软件路由权限和按钮权限的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录
一菜单路由权限二按钮权限的实现
一 菜单路由权限
1.1前端路由配置表
1.2后端数据返回
1.3 拿到数据后存到状态管理
1.4 扁平化的目的是为了跳转路由时进行对比权限
//扁平化方法
扁平化（数据){
return data.reduce((arr，{name，id，resourceType，dimensionTypeCode，btnPermissions，path，children=[]，})=
arr.concat([{name，id，resourceType，dimensionTypeCode，btnPermissions，path，}，]，
这.展平(儿童)
),[]);
},
1.5升菜单中直接拿到状态管理中的数据进行渲染侧栏项目组件的代码就不贴了
埃尔菜单
:default-active=activeMenu
:collapse=isCollapse
:unique-opened=false
:collapse-transition=false
模式=垂直
侧栏项目
产品菜单列表中的v-for=(路线，索引
:key=index
:item=route
:base-path=route.path
/
/el-menu
//js部分
计算值：{
productMenuList() {
如果（这个100美元商店。状态。用户。用户。用户菜单){
归还这个100美元商店。状态。用户。用户。用户菜单；
}
},
},
1.6路由器跳转拦截判断
router.beforeEach(收件人，_发件人，下一个)={
document.title=后台系统- to.meta.title //动态标题
如果(白名单。包含（收件人路径)){
next()；
}否则{
如果(存储本地。getitem( token ){
if (hasPermission(to，store。状态。用户。用户。menutile)){
next()；
}
否则{
下一步(/error/404 )
}
}
否则{
下一个({
路径："/登录"，
查询：{
重定向：to.fullPath
}
})
}
}
})
//获取是否有当前跳转的菜单权限
函数有权限（路由器，访问菜单){
let menu=getMenuByPath(路由器。路径、访问菜单)；
if (menu.path) {
返回真实的
}
返回错误的
}
1.7 getMenuBypath方法
这里我是拿小路进行比对的，也可以拿姓名，只要是路由中唯一的都可以；
export const getMenuByPath=function(path，accessMenu) {
如果（访问菜单){
让过滤器=进入菜单。过滤器(RES={
return res.path==path
})
返回过滤器。长度0?过滤器[0] : {}
}
}
二 按钮权限的实现
2.1后端返回的数据还是那份
2.2 封装自定义指令，新建hasPermissionbtn.js
从导入路由器././路由器
导入商店自././商店
导出默认值(Vue)={
/**自定义按钮权限指令*/
Vue.directive(has ，{
已安装(el，装订){
//从配置获取用户按钮权限
设路径=路由器。电流输出。价值。路径；
let menu=getMenuByPath(路径，存储。状态。用户。用户。menu tile)；
//获取按钮权限
如果(!vue。配置。全局属性。$ _具有(绑定。value，menu.btnPermissions)){
//移除不匹配的元素
el.parentNode.removeChild(el)
//el.setAttribute(disabled ，true)
}
},
})
//检查权限方法
vue。配置。全局属性。$ _ has=function(value，btnPermissions) {
设isExist=false
//有权限的按钮集合；
设btnPermsArr=[]
if (btnPermissions) {
btnPermsArr=权限
}
if(btnpermsarr。包括(值)){
isExist=true
}
返回isExist
}
}
2.3 权限按钮中的使用
//虚拟哈希可以使用在任何元素上，如差异或者埃尔-表格-列标签
El-button type= text v-has= env:account 关联/el-button
到此这篇关于某视频剪辑软件路由权限和按钮权限的实现示例的文章就介绍到这了，更多相关某视频剪辑软件路由权限和按钮权限内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。