【Vue】 vue-element-admin 路由菜单配置
路由说明见官方文档：
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html
组件渲染的数据来源
这里先说明侧边栏组件获取的路由：
src\layout\components\Sidebar\index.vue
路由是通过这个permission_routers获取的
<template>
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters([
'permission_routes',
'sidebar'
]),
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables() {
return variables
},
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>
访问到Gettter.js可以看到Vuex是区分了命名空间的，对应的空间是permission
const getters = {
sidebar: state => state.app.sidebar,
size: state => state.app.size,
device: state => state.app.device,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
introduction: state => state.user.introduction,
roles: state => state.user.roles,
// permission_routes: state => state.permission.routes,
permission_routes: state => state.menu.routes,
errorLogs: state => state.errorLog.logs
}
export default getters
所以说，默认是从permission模块里的routes获取的
如果我们新开的Vuex写路由获取逻辑，这里不改的话就拿不到我们自己获取的路由了
路由权限控制
在main.js下面的permission里面：
每次跳转路由，都要从VueX拿令牌，判断用户是否有效
自己定义校验规则 和 路由获取规则即可,
这段参考Open-his来做的，路由还是前端配置，控制只展示哪些，交给后端来完成
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
/**
* no redirect whitelist
* 白名单，没有权限控制的路由地址
* @type {string[]}
*/
const whiteList = ['/login', '/auth-redirect']
/**
* 在路由跳转之前，勾子函数的控制
*/
router.beforeEach(async(to, from, next) => {
/* 启动进度条 start progress bar */
NProgress.start()
/* 设置系统标签文本信息 set page title */
document.title = getPageTitle(to.meta.title)
/* 从Cookie里面提取令牌 determine whether the user has logged in */
const hasToken = getToken()
/* 令牌存在 */
if (hasToken) {
/* 访问登录页时直接放行 */
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
} else {
/**
* 判断当前用户的角色集合是否存在
* determine whether the user has obtained his permission roles through getInfo
* @type {any}
*/
// const hasRoles = store.getters.roles && store.getters.roles.length > 0
/* 存在则放行路由 */
// 确定用户是否已通过getInfo获得其用户
const hasName = !!store.getters.name
if (hasName) {
next()
} else {
/* 没有则重新获取用户信息 */
try {
/**
* // get user info
* // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
* 根据令牌重新获取用户信息，只要角色集合
*/
const { menus } = await store.dispatch('user/getInfo')
/**
* generate accessible routes map based on roles
* 创建可访问的路由表
* @type {any}
*/
// const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
const accessRoutes = await store.dispatch('menu/getAccessMenus', menus)
/**
* dynamically add accessible routes
* 动态添加路由
*/
router.addRoutes(accessRoutes)
/**
* 如果用户状态持续，保持路由不会丢掉历史记录
* // hack method to ensure that addRoutes is complete
* // set the replace: true, so the navigation will not leave a history record
*/
next({ ...to, replace: true })
} catch (error) {
/**
* 如果用户信息无法获取，重定向，要求用户重新登录
* remove token and go to login page to re-login
*/
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* 如果没有令牌，检查是否是白名单的路由 has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
/* 没有权限，也不是白名单，重定向到登录页面 */
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
/* 每次跳转之后的回调勾子 */
router.afterEach(() => {
/* finish progress bar 进度条加载完成 */
NProgress.done()
})
路由获取规则Menu.js
import { asyncRoutes, constantRoutes, lastRoute } from '@/router/index'
const state = {
routes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = routes
}
}
/**
* 递归路由集合，和用户的菜单进行比较，符合则打开，反之关闭
* @param routes
* @param srvMenus
*/
function generateMenus(routes, srvMenus) {
for (let i = 0; i < routes.length; i++) {
const routeItem = routes[i]
let showItem = false
for (let j = 0; j < srvMenus.length; j++) {
const srvItem = srvMenus[j]
// 前后端数据通过 serPath 属性来匹配
if (routeItem.name !== undefined && routeItem.name === srvItem['menuRoute'] && srvItem['isShow'] === true) {
showItem = true
routes[i]['hidden'] = false
break
}
}
if (showItem === false) {
routes[i]['hidden'] = true
}
if (routeItem['children'] !== undefined && routeItem['children'].length > 0) {
generateMenus(routes[i]['children'], srvMenus)
}
}
}
const actions = {
getAccessMenus({ commit }, menus) {
return new Promise(resolve => {
const pushRouter = asyncRoutes
generateMenus(pushRouter, menus)
const routeArr = []
console.log(constantRoutes)
routeArr.push(...constantRoutes)
routeArr.push(...pushRouter)
routeArr.push(...lastRoute)
commit('SET_ROUTES', routeArr)
console.log(routeArr)
/* 返回全部匹配的路由 */
resolve(routeArr)
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
前端路由表配置：
我想弄三层菜单，需要第二层再单开组件放路由才可以，这个可以查看文档说明
https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html#侧边栏
这里我就只放异步路由的配置，常量路由是所有人都能看的，没啥可表达的
/**
* 异步路由，根据用户的角色集合动态加载
* asyncRoutes
* the routes that need to be dynamically loaded based on user roles
*/
export const asyncRoutes = [
{
path: '/system',
component: Layout,
redirect: 'noRedirect',
name: '/system',
alwaysShow: true,
meta: { title: '系统管理', icon: 'lock' },
children: [
{
path: 'rbac',
component: () => import('@/views/tt-server/system/rbac/index'),
name: '/system/rbac',
meta: { title: '权限维护', icon: 'lock' },
children: [
{
path: 'user-info',
component: () => import('@/views/tt-server/system/rbac/user-info/index'),
name: '/system/rbac/user-info',
meta: { title: '用户管理', icon: 'edit' }
},
{
path: 'role-info',
component: () => import('@/views/tt-server/system/rbac/role-info/index'),
name: '/system/rbac/role-info',
meta: { title: '角色管理', icon: 'edit' }
},
{
path: 'menu-info',
component: () => import('@/views/tt-server/system/rbac/menu-info/index'),
name: '/system/rbac/menu-info',
meta: { title: '菜单管理', icon: 'edit' }
},
{
path: 'privilege-info',
component: () => import('@/views/tt-server/system/rbac/privilege-info/index'),
name: '/system/rbac/privilege-info',
meta: { title: '权限管理', icon: 'edit' }
}
]
},
{
path: 'common',
component: () => import('@/views/tt-server/system/common/index'),
name: '/system/common',
alwaysShow: true,
meta: { title: '通用管理', icon: 'lock' },
children: [
{
path: 'dict-info',
component: () => import('@/views/tt-server/system/common/dict-info/index'),
name: '/system/common/dict-info',
meta: { title: '字典管理', icon: 'edit' }
},
{
path: 'area-info',
component: () => import('@/views/tt-server/system/common/area-info/index'),
name: '/system/common/area-info',
meta: { title: '区域管理', icon: 'edit' }
},
{
path: 'system-param',
component: () => import('@/views/tt-server/system/common/system-param/index'),
name: '/system/common/system-param',
meta: { title: '系统参数', icon: 'edit' }
},
{
path: 'system-log',
component: () => import('@/views/tt-server/system/common/system-log/index'),
name: '/system/common/system-log',
meta: { title: '系统日志', icon: 'edit' }
}
]
}
]
}
]
后台数据设计：
表结构
CREATE TABLE `sys_menu` ( `id` int NOT NULL AUTO_INCREMENT COMMENT '菜单主键', `app_code` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '应用编号', `menu_name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜单名称', `menu_value` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜单值', `menu_icon` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜单图标', `menu_level` int NOT NULL DEFAULT '1' COMMENT '菜单层级', `menu_type` varchar(12) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '菜单类型', `menu_sort` int NOT NULL COMMENT '菜单排序', `menu_route` varchar(64) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '菜单路由', `is_show` tinyint(1) DEFAULT '1' COMMENT '是否展示 1展示 0隐藏', `menu_path` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜单主键路径', `parent_id` int NOT NULL DEFAULT '0' COMMENT '父级菜单，顶级菜单默认为0', `creator` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '创建人', `create_time` datetime DEFAULT NULL COMMENT '创建时间', `updater` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '更新人', `update_time` datetime DEFAULT NULL COMMENT '更新时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=100200401 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci COMMENT='系统菜单表';
菜单记录：
【菜单路由】和【是否展示】是前端路由展示的判断条件
mysql> SELECT * FROM sys_menu; +-----------+-----------+-----------+--------------+-----------+------------+-----------+-----------+-----------------------------+---------+---------------------------------+-----------+---------+---------------------+---------+---------------------+ | id | app_code | menu_name | menu_value | menu_icon | menu_level | menu_type | menu_sort | menu_route | is_show | menu_path | parent_id | creator | create_time | updater | update_time | +-----------+-----------+-----------+--------------+-----------+------------+-----------+-----------+-----------------------------+---------+---------------------------------+-----------+---------+---------------------+---------+---------------------+ | 100000000 | tt-server | 系统管理 | system | | 1 | Directory | 1 | /system | 1 | 0,100000000 | 0 | admin | 2022-12-07 23:46:49 | admin | 2022-12-07 23:46:51 | | 100100000 | tt-server | 权限维护 | privileges | | 2 | Directory | 1 | /system/rbac | 1 | 0,100000000,100100000 | 100000000 | admin | 2022-12-07 23:41:14 | admin | 2022-12-07 23:41:16 | | 100100100 | tt-server | 用户管理 | user-info | | 3 | Function | 1 | /system/rbac/user-info | 1 | 0,100000000,100100000,100100100 | 100100000 | admin | 2022-12-07 23:44:12 | admin | 2022-12-07 23:44:12 | | 100100200 | tt-server | 角色管理 | role-info | | 3 | Function | 2 | /system/rbac/role-info | 1 | 0,100000000,100100000,100100200 | 100100000 | admin | 2022-12-07 23:44:12 | admin | 2022-12-07 23:44:12 | | 100100300 | tt-server | 菜单管理 | menu-info | | 3 | Function | 3 | /system/rbac/menu-info | 1 | 0,100000000,100100000,100100300 | 100100000 | admin | 2022-12-07 23:44:12 | admin | 2022-12-07 23:44:12 | | 100100400 | tt-server | 权限管理 | permit-info | | 3 | Function | 4 | /system/rbac/privilege-info | 1 | 0,100000000,100100000,100100400 | 100100000 | admin | 2022-12-07 23:44:12 | admin | 2022-12-07 23:44:12 | | 100200000 | tt-server | 通用管理 | common | | 2 | Directory | 2 | /system/common | 1 | 0,100000000,100200000 | 100000000 | admin | 2022-12-07 23:42:03 | admin | 2022-12-07 23:42:03 | | 100200100 | tt-server | 字典管理 | dict-info | | 3 | Function | 1 | /system/common/dict-info | 1 | 0,100000000,100200000,100200100 | 100200000 | admin | 2022-12-07 23:44:12 | admin | 2022-12-07 23:44:12 | | 100200200 | tt-server | 行政区域 | area-info | | 3 | Function | 2 | /system/common/area-info | 1 | 0,100000000,100200000,100200200 | 100200000 | admin | 2022-12-07 23:44:12 | admin | 2022-12-07 23:44:12 | | 100200300 | tt-server | 系统参数 | system-param | | 3 | Function | 3 | /system/common/system-param | 1 | 0,100000000,100200000,100200300 | 100200000 | admin | 2022-12-07 23:44:12 | admin | 2022-12-07 23:44:12 | | 100200400 | tt-server | 系统日志 | system-log | | 3 | Function | 4 | /system/common/system-log | 1 | 0,100000000,100200000,100200400 | 100200000 | admin | 2022-12-07 23:44:12 | admin | 2022-12-07 23:44:12 | +-----------+-----------+-----------+--------------+-----------+------------+-----------+-----------+-----------------------------+---------+---------------------------------+-----------+---------+---------------------+---------+---------------------+
展示效果
