vue-element-admin权限路由

Posted 2023-03-15

参考技术A 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