做的功能是根据用户登录，来动态加载当前用户所拥有的菜单有哪些，所用模板是vue-admin-template，这块自己也不是很理解，暂时做个记录。
1.路由导入的时候有很多坑，网上看了很多资料说用require，结果都不行，最后用import方式实现的
2.data是后台返回的数据，data_是自己写死的模拟数据，后台返回data_这种结构
3. Object.assign(loadMenuData, data_)，对象赋值一定要用深拷贝Object.assign()，不然赋值不成功
下面的文本自行选看，有的参数是其他页面的这个页面没有用到
import { asyncRoutes, constantRoutes } from '@/router'
import { getAuthMenu } from '@/api/menu'
import Layout from '@/layout'
import { setStore, getStore, removeStore } from '@/utils/storage'
/**
* Use meta.role to determine if the current user has permission
* 使用 meta.role 确定当前用户是否具有权限
* @param roles
* @param route
*/
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
} else {
return true
}
}
/**
* 后台查询的菜单数据拼接成路由格式的数据
* @param routes
* @param data
* @param is_children
*/
export function generaMenu(routes, data, is_children = false) {
data.forEach(item => {
const menu = {
path: item.path,
component: item.component === 'Layout' ? Layout : loadview(item.component),
name: item.name,
meta: item.meta
}
if (is_children === false) {
menu.children = []
menu.alwaysShow = item.alwaysShow
menu.redirect = item.redirect
}
// if (item.children) {
// menu.children = [];
// }
if (item.children && is_children === false) {
generaMenu(menu.children, item.children, false)
}
routes.push(menu)
})
}
// 路由跳转
export const loadview = (param) => {
// console.log('menu-ABC-------' + `@/views/${param}`);
// return (resolve) => require([`@/views/permission/role`], resolve)
// return (resolve) => require([`@${path}`], resolve)
return () =>
import (`@/views/${param}`)
}
/**
* Filter asynchronous routing tables by recursion
* 通过递归过滤异步路由表
* @param routes asyncRoutes
* @param roles
*/
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = {...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
const loadMenuData = []
// 先查询后台返回左侧菜单数据并将数据添加到路由
let id = getStore('storageSystemId') //his.getters.id;
// console.log('路由系统id:------------' + id);
let obj = {
id: id
}
getAuthMenu(obj).then(response => {
let { data } = response;
data.forEach(item => {
item.children.forEach(item1 => {
let lastIndexOf = item1.component.lastIndexOf("/");
item1.path = item1.component.substring(lastIndexOf + 1, item1.component.length);
item1.name = item1.component.substring(lastIndexOf + 1, item1.component.length);
// console.log(item1.component.substring(lastIndexOf + 1, item1.component.length));
// console.log(lastIndexOf);
})
})
// console.log(data);
let data_ = [{
"path": "/permission",
"component": "Layout",
"redirect": "/permission/role",
"name": "系统管理",
"alwaysShow": true,
"meta": {
"title": "系统管理",
"icon": "lock"
},
"children": [{
"path": "role",
"name": "role",
"component": "permission/role",
"meta": {
"title": "角色权限",
"icon": "table"
}
},
{
"path": "postManagement",
"name": "postManagement",
"component": "permission/postManagement",
"meta": {
"title": "岗位管理",
"icon": "table"
}
},
{
"path": "organization",
"name": "organization",
"component": "permission/organization",
"meta": {
"title": "组织",
"icon": "table"
}
},
{
"path": "menu",
"name": "menu",
"component": "permission/menu",
"meta": {
"title": "WEB菜单",
"icon": "table"
}
},
{
"path": "menu_app",
"name": "menu_app",
"component": "permission/menu_app",
"meta": {
"title": "APP菜单",
"icon": "table"
}
},
{
"path": "menu_applet",
"name": "menu_applet",
"component": "permission/menu_applet",
"meta": {
"title": "小程序菜单",
"icon": "table"
}
},
{
"path": "subSystemTable",
"name": "subSystemTable",
"component": "permission/subSystemTable",
"meta": {
"title": "子系统表",
"icon": "table"
}
},
{
"path": "users",
"name": "users",
"component": "permission/users",
"meta": {
"title": "用户",
"icon": "table"
}
},
{
"path": "dataDictionary",
"name": "dataDictionary",
"component": "permission/dataDictionary",
"meta": {
"title": "数据字典",
"icon": "table"
}
},
{
"path": "orginals",
"name": "orginals",
"component": "permission/orginals",
"meta": {
"title": "通讯源码",
"icon": "table"
}
}
]
},
{
"path": "/log",
"component": "Layout",
"redirect": "/",
"name": "日志中心",
"alwaysShow": true,
"meta": {
"title": "日志中心",
"icon": "lock"
},
"children": [{
"path": "loginlog",
"name": "loginlog",
"component": "log/login",
"meta": {
"title": "登录日志",
"icon": "table"
}
}, {
"path": "operlog",
"name": "operlog",
"component": "log/oper",
"meta": {
"title": "操作日志",
"icon": "table"
}
}]
},
]
roles = ['admin'];
if (response.code != 200) {
// alert(JSON.stringify(response.message))
} else {
// data = response.data
// console.log(data);
console.log('---------09999--');
Object.assign(loadMenuData, data_)
const tempAsyncRoutes = Object.assign([], asyncRoutes)
generaMenu(tempAsyncRoutes, loadMenuData)
let accessedRoutes
if (roles.includes('admin')) {
accessedRoutes = tempAsyncRoutes || []
} else {
accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
}
}).catch(error => {
console.log(error)
})
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
