> 在开发后台管理项目时，多用户多角色不同权限的场景可以说是非常普遍的。从零开始手写一个后台，要考虑的东西很多，这里直接拿网上大家比较熟悉的vue-admin-template后台模版来进行改造。
## 后台修改
### 编写MenuVo实体类
```
@Data
@JsonInclude(JsonInclude.Include.NON_NULL)//去除null的数据节点
public class MenuVo {
//名称
private String name;
//路径
private String path;
//component
private String component;
//meta数据
private MenuMetaVo meta;
//子节点信息
private List<MenuVo> children;
//是否显示
private Boolean hidden=false;
}
```
### 改造info接口添加菜单数据
```
@RequestMapping(value = "/info", method = RequestMethod.GET)
@ApiOperation("登陆后获得用户信息")
public Result getinfo( String token ) {
if (token != null) {
//token = token.substring(7); // The partafter "Bearer "
Claims claims = jwtUtil.parseJWT(token);
Map map = new HashMap();
map.put("name", claims.get("sub"));
map.put("roles", claims.get("roles"));
map.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
map.put("menus", BulidTree.genRoot(sysTreeService.MenuTree()));
return new Result(true, StatusCode.OK, "登陆成功", map);
}
return new Result(false, StatusCode.ACCESSERROR, "登陆失败");
}
```
### 菜单树展示
```
{
"menus": [
{
"name": "权限管理",
"path": "/authority",
"component": "Layout",
"meta": {
"title": "权限管理",
"icon": "authority"
},
"children": [
{
"name": "部门管理",
"path": "drpt",
"component": "management/dept",
"meta": {
"title": "部门管理",
"icon": "dept"
},
"hidden": false
},
{
"name": "菜单管理",
"path": "aclModule",
"component": "management/aclModule",
"meta": {
"title": "菜单管理",
"icon": "menut"
},
"hidden": false
},
{
"name": "角色管理",
"path": "rloe",
"component": "management/role",
"meta": {
"title": "角色管理",
"icon": "menut"
},
"hidden": false
},
{
"name": "日志管理",
"path": "log",
"component": "management/log",
"meta": {
"title": "日志管理",
"icon": "menut"
},
"hidden": false
},
{
"name": "用户管理",
"path": "user",
"component": "management/user",
"meta": {
"title": "用户管理",
"icon": null
},
"hidden": true
},
{
"name": "权限点管理",
"path": "authority",
"component": "management/authority",
"meta": {
"title": "权限点管理",
"icon": null
},
"hidden": true
},
{
"name": "菜单权限管理",
"path": "acl",
"component": "management/acl",
"meta": {
"title": "菜单权限管理",
"icon": null
},
"hidden": true
}
],
"hidden": false
}
]
}
```
## 前端修改
> 在router这个目录下新建两个js文件，开发环境和生产环境导入组件的方式略有不同
##### 新建_import_development.js/_import_production.js
- _import_development
```
module.exports = file => require('@/views/' + file + '.vue').default
```
- _import_production.js
```
// 生产环境导入组件
module.exports = file => () => import('@/views/' + file + '.vue')
```
##### 新建permission.js
```
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'
import Layout from '@/layout'
const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法
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 (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 {
await store.dispatch('user/getInfo') // 请求获取用户信息
if (store.getters.menus.length < 1) {
global.antRouter = []
next()
}
const menus = filterAsyncRouter(store.getters.menus) // 1.过滤路由
router.addRoutes(menus) // 2.动态添加路由
global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
next({
...to,
replace: true
})
//next()
} catch (error) {
// remove token and go to login page to re-login
console.log(error);
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()
})
// // 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
//debugger
const accessedRouters = asyncRouterMap.filter(route => {
// debugger
if (route.component) {
//debugger
if (route.component === 'Layout') {
route.component = Layout
} else {
route.component = _import(route.component) // 导入组件
//console.log(route.component )
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
```
### 修改store/modules/user添加`menus`对象数据
```
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: '',
menus: [] // 菜单列表
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_MENUS: (state, menus) => {
state.menus = menus
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { mail, password } = userInfo
return new Promise((resolve, reject) => {
login({ mail: mail.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data)
setToken(data)
resolve()
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
reject('Verification failed, please Login again.')
}
const { name, avatar,menus } = data
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_MENUS', menus)
//console.log(avatar)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
removeToken() // must remove token first
resetRouter()
commit('RESET_STATE')
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
removeToken() // must remove token first
commit('RESET_STATE')
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
```
#### 修改store/modules/getters添加`state.user.menus`
```
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,
menus: state => state.user.menus,
}
export default getters
```
#### 修改router/index.js
```
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/index',
children: [{
path: '/index',
name: '首页',
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'dashboard' }
}]
},
{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
```
vue-admin-template 动态权限菜单
