- 修改@/src/router/index.js(@代表项目根路径,下同)
- 定义静态路由变量,代表登录前的两个页面login和404
export const constantRouterMap = [ { path: '/login', component: () => import('@/views/login/index'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true } ]
- 定义动态路由变量,加入各个菜单的权限角色定义,通过meta的roles属性定义数组(具体菜单根据项目调整,此处仅作示例)
-
export const asyncRouterMap = [{ path: '/', component: Layout, redirect: '/dashboard', name: 'Dashboard', hidden: true, children: [{ path: 'dashboard', component: () => import('@/views/dashboard/index') }] }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { roles: ['superAdmin', 'admin'], title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index'), meta: { title: 'Tree', icon: 'tree' } } ] }, { path: '*', redirect: '/404', hidden: true } ]
修改@/src/permission.js(仅作最简修改得以使用,不做代码规范)
-
添加判断权限的函数
import { constantRouterMap, asyncRouterMap } from './router' function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.indexOf(role) >= 0) } else { // 没有配置权限的全部显示 return true } }
-
拉取用户信息后,添加权限判断,动态添加路由(代码"store.dispatch('GetInfo').then(res => { "后添加)
const roles = res.data.roles var accessedRouters = [] new Promise(resolve => { accessedRouters = asyncRouterMap.filter(v => { if (hasPermission(roles, v)) { if (v.children && v.children > 0) { // 存在子菜单 v.children = v.filter(child => { if (hasPermission(roles, child)) { return child } return false }) return v } return v // 拥有权限,将菜单加入 } return false }) resolve() }) router.addRoutes(accessedRouters) router.options.routes = constantRouterMap.concat(accessedRouters) next({ ...to, replace: true })
-
- 定义静态路由变量,代表登录前的两个页面login和404
使用vue2+element+vue-admin-template创建单页应用小记-2.动态权限路由加载
猜你喜欢
转载自blog.csdn.net/onlyjin/article/details/82457200
今日推荐
周排行