一、后端接口获取菜单信息
1、返回数据样式
{
"code": 20000,
"data": [{
"menuId": "2000000000000001",
"parentMenuId": "0",
"name": "Json工具",
"menuType": 2,
"component": "#",
"redirect": "",
"alwaysShow": true,
"hidden": false,
"sort": 0,
"level": 0,
"children": [{
"menuId": "2210574586898432",
"parentMenuId": "2000000000000001",
"name": "Json校验格式化工具",
"menuType": 2,
"component": "/amis/index",
"redirect": "",
"alwaysShow": true,
"hidden": false,
"sort": 0,
"level": 0,
"children": [],
"meta": {
"title": "Json校验格式化工具",
"icon": "",
"roles": null
}
}],
"meta": {
"title": "Json工具",
"icon": "user",
"roles": null
}
}],
"msg": "操作成功",
"pager": null
}2、调整src/router/index.js文件内容
const createRouter = ()上面增加动态路由默认配置
// asyncRoutes 是动态的，后台返回哪些就只有哪些。
export const asyncRoutes = [
// 404 必须添加
{ path: '*', redirect: '/404', hidden: true }
]3、增加permission处理
创建 src/store/modules/permission.js 文件
import { constantRoutes } from '@/router' // 引入路由表里的固定路由
import { getMenu } from '@/api/user' // 引入第一步创建的获取权限信息的接口
import Layout from '@/layout' // 引入布局
/**
* 后台查询的菜单数据拼装成路由格式的数据
*/
export function generaMenu(routes, data) {
data.forEach(item => {
console.log('菜单信息', JSON.stringify(item))
const menu = {
path: '/page/' + item.menuId,
component: item.component === '#' ? Layout : () => import('@/views/amis/index'),
hidden: item.hidden,
redirect: item.redirect,
children: [],
name: 'menu_' + item.menuId,
meta: item.meta
}
if (item.children) {
generaMenu(menu.children, item.children)
}
routes.push(menu)
})
}
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes // 路由访问
state.routes = constantRoutes.concat(routes) // 菜单显示
}
}
const actions = {
generateRoutes({ commit }) {
return new Promise(async resolve => {
const routes = await getMenu({menuType: 2}) // 接口获取到后台返回的权限信息，包含路由
console.log("查询的菜单信息",routes)
const asyncRoutes = []
generaMenu(asyncRoutes, routes.data)
commit('SET_ROUTES', asyncRoutes)
resolve(asyncRoutes)
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}4、把自定义的permission挂在到store上面
修改src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
// ！！！！增加内容开始
import permission from './modules/permission'
// ！！！！增加内容结束
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user,
// ！！！！增加内容开始
permission
// ！！！！增加内容结束
},
getters
})
export default store5、权限拦截
修改src/permission.js文件，注意路径： 不是上面新增的文件
// 修改内容开始
import router,{ constantRoutes } from './router' // 这里把constantRoutes 引入进来
// 修改内容结束
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
const whiteList = ['/login'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
// 修改内容开始
//去除权限，如果不去除权限，把下面的if(token)放开就可以
next()
const accessRoutes = await store.dispatch('permission/generateRoutes')
router.addRoutes(accessRoutes)
// if (hasToken) {
// if (to.path === '/login') {
// // if is logged in, redirect to the home page
// next({ path: '/' })
// NProgress.done()
// } else {
// const hasGetUserInfo = store.getters.name
// if (hasGetUserInfo) {
// next()
// } else {
// try {
// // get user info
// await store.dispatch('user/getInfo')
// // 这里调用的就是第三步新建的generateRoutes
// const accessRoutes = await store.dispatch('permission/generateRoutes')
// router.options.routers = constantRoutes.concat(accessRoutes) // 这一步必须写，不然会出现左侧菜单空白、刷新空白等问题
// router.addRoutes(accessRoutes)
// next({ ...to, replace: true })
// // next()
// } 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()
})6、修改src/store/getters.js文件，增加动态路由
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
// 增加内容开始
// 动态路由
permission_routes: state => state.permission.routes
// 增加内容结束
}
export default getters7、修改菜单组件vue文件
修改src/layout/components/Sidebar/index.vue
<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 routes" :key="route.path" :item="route" :base-path="route.path" /> -->
<!-- 修改内容开始 -->
<!-- 动态路由 -->
<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'
]),
routes() {
return this.$router.options.routes
},
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>
参考文档：https://blog.csdn.net/qq_36873710/article/details/124430511
- vue-element-template 后台 template 菜单 elementvue-element-template后台template菜单 vue-element-template template顶部 菜单 vue-element-template vue-element-template template element vue vue-element-template路由template权限 template element模式render vue-element-admin菜单element项目 后台 管理系统 菜单 权限 vue-element-admin菜单element动态 element_ui菜单element程序