1、java端:
1.1、通过接口获取该用户的角色权限
此处不再复述
2、vue-element
其主要处理是在这个文件
2.2、permission.js
import router, {asyncRoutes,constantRoutes }from '@/router'
import {getAuthMenu }from '@/api/user'
import Layoutfrom '@/layout'
/**
* Use meta.role to determine if the current user has permission
* @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
}
}
/**
* 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: [],
perms: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes =constantRoutes.concat(routes)
},
ADD_LOGIN_USER_INFO: (state, data) => {
state.perms = data
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
const loadMenuData = []
// 先查询后台并返回左侧菜单数据并把数据添加到路由
getAuthMenu(roles).then(response => {
let data = response
if (response.code !==0) {
this.$message({
message:'菜单数据加载异常',
type:0
})
}else {
const permis = response.pers
data = response.menuList
console.log('==============加载===========')
Object.assign(loadMenuData,data)
generaMenu(asyncRoutes,loadMenuData)
const accessedRoutes =asyncRoutes || []
// accessedRoutes.push({ path: '*', component: () => import('@/views/error-page/404'), hidden: true })
commit('ADD_LOGIN_USER_INFO',permis)
commit('SET_ROUTES',accessedRoutes)
router.addRoutes(accessedRoutes)
resolve(accessedRoutes)
}
})
})
}
}
/**
* 后台查询的菜单数据拼装成路由格式的数据
* @param routes
*/
/* export function generaMenu(routes, data) {
data.forEach(item => {
let tempUrl = item.url
if (item.url === null) {
tempUrl = ''
}
const menu = {
path: item.url === null ? item.ename : item.url,
component: item.url === null ? Layout : resolve => require([`@/views${tempUrl}`], resolve),
children: [],
name: 'menu_' + item.menuId,
meta: { title: item.name, id: item.menuId, roles: ['admin'], icon: item.icon }
}
if (item.list) {
generaMenu(menu.children, item.list)
}
if (item.menuId !== -100) {
routes.push(menu)
}
})
}*/
export function generaMenu(routes, data) {
data.forEach(item => {
if (item.state ===0) {
let typeParentId =''
if (item.parentId ===0) {
typeParentId ='noRedirect'
}
let tempUrl = item.urlNew
if (item.urlNew ===null) {
tempUrl =''
}
if (item.parentId !==0 && item.urlNew ===null) {
tempUrl ='/404'
item.urlNew ='/404'
}
let menu = {}
if (item.Identify ===1) {// 需铺满屏幕（隐藏左侧导航栏）
menu = {
path: item.urlNew ===null ? item.ename : item.urlNew,
hidden: item.type ===2,
children: [],
name:'menu_' + item.menuId,
redirect:typeParentId,
meta: {title: item.name,id: item.menuId,roles: ['admin'],icon: item.iconNew }
}
}else {
menu = {
path: item.urlNew ===null ? item.ename : item.urlNew,
component: item.urlNew ===null ? Layout : resolve => require([`@/views${tempUrl}`], resolve),
hidden: item.type ===2,
children: [],
name:'menu_' + item.menuId,
redirect:typeParentId,
meta: {title: item.name,id: item.menuId,roles: ['admin'],icon: item.iconNew }
}
}
if (item.list) {
generaMenu(menu.children, item.list)
}
routes.push(menu)
}
})
}
export default {
namespaced:true,
state,
mutations,
actions
}