vue 路由权限 动态,vuerouter动态路由权限
这篇文章主要给大家介绍了关于某视频剪辑软件动态设置路由权限的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
之前看到网上有些动态设置路由的，但是跟目前的项目不是很匹配，就自己动手实现了一种。主要思路就是：
1.配置路由的时候绑定好id，可后端开发完成后，与后端同步编号就行，这编号唯一不变，根据此编号可找到路由地址及图标。
const routerArr=[
{
路径： ,
名称： ,
component:()=import(/* webpackChunkName:策略维护 */ @/components/Layout/Index )，
元：{
requireAuth: true，
id: 1，
图标：“iconjanghuguanli”，
标题： 路由1
},
孩子：[{
路径："/verificationLog "，
名称：验证日志，
component:()=import(/* webpackChunkName:验证日志 */ @/views/audit manage/验证日志)，
元：{
requireAuth: true，
编号：101,
icon: icon-disanyangzhi ，
标题： 路由11
}
}, {
路径："/系统日志"，
名称："系统日志",
component:()=import(/* webpackChunkName:系统日志 */ @/views/audit manager/系统日志)，
元：{
requireAuth: true，
编号：102,
图标：“icon-xitongcaozoorizhi”，
标题： 路由12
}
}]
}
];
导出默认路由器arr
2.设置本地路由与后端传来的路由的联系，主要是根据编号绑定路由地址及图标类
从" @/路由器/模块"导入路由器模块
从" @/utils/http "导入{http}
从" @/商店"导入商店；
从"元素-用户界面"导入{消息}
const formateredata=(val)={//格式化路由数据
const obj={ }；
const fn=(arr)={
对于(设i=0，item item=arr[I]；){
obj[item[meta][id]]={
路径：项目[路径]，
iconClass: item[meta][icon]
};
如果(项。儿童项目。孩子。长度0){
fn(项目。子)；
}
}
}
fn(val)；
返回目标文件
};
const map obj=formateredata(路由器模块)；
const dealWithData=(导航数据)={//处理菜单数据
设第一个链接=" "；
const Navi darr=[]；
const fn=(arr)={
对于(设i=0，item item=arr[I]；) {
item[ icon class ]=map obj[item。id].图标类
item[链接操作]=映射对象[item。id].路径；
纳维达尔。推(项。id)；
如果(!firstLink！item.subMenu) { //设置默认跳转
first link=item[ link action ]；
}
如果(项。子菜单项。子菜单。长度0){
fn(项目。子菜单)；
}
}
}
导航数据；
返回{navData，navIdArr，first link }；
};
让导航id=[]；
const getNav=async (to={}，from={}，next=()={})={ //获取导航数据
const {code，data}=await http(/menu/list ，{}， GET )；//获取菜单数据
//const data=require( @/mock/API/menu data )；//使用模拟的数据
const {navData，navIdArr，first link }=deallowithdata(data)；
store.commit(setNavData ，navData)；
纳维德=纳维德
if(to.fullPath==/index){ //从登录过来或者是回首页
下一个(第一环节)；
}else { //刷新
如果(navids。的索引(到。meta。id)==-1){//后端没有返回该菜单
Message.error(菜单不存在或者没有权限);
返回；
}
next()；
}
}
export const setGuard=(to={}，from={}，next=()={})={ //设置权限
if(navIds.length===0){ //还没有获取菜单数据
获取导航(到，从，下一个);
}else { //获取到菜单数据
如果(navids。的索引(到。meta。id)==-1){//后端没有返回该菜单
Message.error(菜单不存在或者没有权限);
返回；
}
next()；
}
}
3.在mainjs中引入配置
router.beforeEach(收件人，发件人，下一个)={
let token=wlhStorage.get(授权);
if (to.path==/login) {
存储。clear()；//清空缓存
next()；
}否则{
如果(到。meta。需要授权令牌){//登陆
setGuard(到，从，下一个);
} else { //没有登录
下一步(/log in )；
}
}
})
总结
关于vue动态设置路由权限的这篇文章到此为止。关于vue动态设置路由权限的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。