vue动态路由导航栏列表展示权限管理

根据接口获取权限渲染菜单

- 效果图
- 先来看看后台返回数据格式
1.处理后台返回数据
2.整理权限只保留权限名称放入数组
- console.log(permissionList)
3.根据router>index.js过滤接口获得的权限
4.后台获取的权限数组与router>index.js里的路由进行对比看是否存在

效果图

先来看看后台返回数据格式

1.处理后台返回数据

getPermission(){//获取权限的方法getPermissoonList(state).then(res => {//getPermissoonList:接口  获取权限数组if(res.code === 200){let permissionList = mapPermission(res.data)//获取到perimission数组let accessedRouters = filterAsyncRouter(asyncRoutes, permissionList)//asyncRoutes为router>index.js路由router.addRoutes(accessedRouters)}})
}

2.整理权限只保留权限名称放入数组

function mapPermission(permission) {let arr = []permission.forEach(i => {arr.push(i.permission)let _arr = []if (i.childList && i.childList.length) {//向下递归调用 查询到最内层数据 把所有permission字段拿到_arr = mapPermission(i.childList)}arr.push(..._arr)})return arr
}

console.log(permissionList)

3.根据router>index.js过滤接口获得的权限

function filterAsyncRouter(asyncRouterMap, permissionList) {let arr = asyncRouterMap.filter(router => {if (checkRouter(router,permissionList)) {if (router.children && router.children.length) {router.children = filterAsyncRouter(router.children,permissionList)//向下递归调用直到最内层}return true} else {return false}})return arr
}

4.后台获取的权限数组与router>index.js里的路由进行对比看是否存在

function checkRouter(router,permissionList) {if (permissionList.indexOf(router.name) != -1) { //后台获取的权限数组与router>index.js里的路由进行对比return true} else {return false}
}

用router.addRoutes把根据router内的路由过滤出的权限路由动态添加进去

vue动态路由导航栏列表展示权限管理相关推荐

vue 通过路由导航守卫控制访问权限
1.作用:防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限. 2.实现代码 2.1在router/index.js中添加如下代码, const router = new VueRoute ...
vue + elementui 实现动态侧边导航栏
vue + elementui 实现动态侧边导航栏引言 router 文件夹创建 layout 文件夹 components 创建 SubMenu 文件夹封装动态侧边栏 vuex 中根据权限动态获 ...
Vue - 路由导航守卫控制访问权限，设置 localStorage 过期时间
Vue 路由导航守卫控制访问权限,设置 localStorage 过期时间一. 路由导航守卫二. 路由导航守卫简单使用三. 使用路由导航守卫设置 token 过期时间导航守卫: https: ...
vue路由导航守卫控制访问权限
利用路由的全局前置守卫beforeEach来控制用户的访问权限. 首先是一个登录的页面用户输入完整的信息,点击登录时,会本地存储用户的登录状态,如果在本地存储中存在用户登录过的痕迹,用户可以直接进入 ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
uniapp动态设置导航栏和标题栏语言
hbuilderx中uniapp动态设置导航栏和标题栏语言一 .下载vue-i18n文件引入项目 hbuilder本身是带有能够运行nmp命令的终端,由于用不到全部文件,我采用的是在电脑cmd窗口下 ...
Vue动态路由的前端实现
1. 需求描述最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式.要完成这样一个转换,有几个技术要 ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
vue+elementui左侧导航栏
vue+elementui左侧导航栏踩坑最近接触前端vue+elementui,记录一下 1. element官网这里:default-active="***"前面没有冒号,直接 ...

vue动态路由导航栏列表展示权限管理

根据接口获取权限渲染菜单

效果图

先来看看后台返回数据格式

1.处理后台返回数据

2.整理权限只保留权限名称放入数组

console.log(permissionList)

3.根据router>index.js过滤接口获得的权限

4.后台获取的权限数组与router>index.js里的路由进行对比看是否存在

vue动态路由导航栏列表展示权限管理相关推荐

最新文章

热门文章

vue动态路由 导航栏列表展示 权限管理

根据接口获取权限渲染菜单

效果图

先来看看后台返回数据格式

1.处理后台返回数据

2.整理权限 只保留权限名称放入数组

console.log(permissionList)

3.根据router>index.js过滤接口获得的权限

4.后台获取的权限数组与router>index.js里的路由进行对比看是否存在

vue动态路由 导航栏列表展示 权限管理相关推荐

最新文章

热门文章

vue动态路由导航栏列表展示权限管理

2.整理权限只保留权限名称放入数组

vue动态路由导航栏列表展示权限管理相关推荐