最近完成了我的后台管理系统权限功能的实现，同时觉得后台系统所有的菜单都左置，会限制菜单的扩展，因此我改进了三级菜单的显示。
- 效果演示地址
- github地址
权限功能的实现
权限路由思路： 根据用户登录的roles信息与路由中配置的roles信息进行比较过滤，生成可以访问的路由表，并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表，从而实现左侧和顶栏菜单的展示。
实现步骤：
1.给相应的菜单设置默认的roles信息
在router/index.js中，给相应的菜单设置默认的roles信息; 如下：给"权限设置"菜单设置的权限为：meta：{roles: ['admin', 'editor']}，及不同的角色都可以看到； 给其子菜单"页面权限",设置权限为：meta：{roles: ['admin']},及表示只有"admin"可以看到该菜单； 给其子菜单"按钮权限"设置权限为：meta：{roles: ['editor']},及表示只有"editor"可以看到该菜单。
2.通过router.beforeEach()进行路由过滤和权限拦截；
代码如下:
// permission judge function
function hasPermission(roles, permissionRoles) {
if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
if (!permissionRoles) return true
return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start()
// 设置浏览器头部标题
const browserHeaderTitle = to.meta.title
store.commit('SET_BROWSERHEADERTITLE', {
browserHeaderTitle: browserHeaderTitle
})
// 点击登录时，拿到了token并存入了vuex;
if (getToken()) {
/* has token*/
if (store.getters.isLock && to.path !== '/lock') {
next({
path: '/lock'
})
NProgress.done()
} else if (to.path === '/login') {
next({ path: '/' }) // 会匹配到path:'',后面的path:'*'还没有生成;
NProgress.done()
} else {
if (store.getters.roles.length === 0) {
store.dispatch('GetInfo').then(res => { // 拉取用户信息
const roles = res.roles
store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问权限路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})
}).catch((err) => {
store.dispatch('FedLogOut').then(() => {
Message.error(err || 'Verification failed, please login again')
next({ path: '/' })
})
})
} else {
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
if (hasPermission(store.getters.roles, to.meta.roles)) {
next()//
} else {
next({ path: '/401', replace: true, query: { noGoBack: true }})
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
// 点击退出时,会定位到这里
next('/login')
NProgress.done()
}
}
})
router.afterEach(() => {
NProgress.done() // 结束Progress
setTimeout(() => {
const browserHeaderTitle = store.getters.browserHeaderTitle
setTitle(browserHeaderTitle)
}, 0)
})
复制代码用户点击登录之后的业务逻辑分析：
1、用户调取登录接口，获取到token，进行路由跳转到首页;
2、通过路由导航钩子router.beforeEach((to,from,next)=>{})函数确定下一步的跳转逻辑，如下：
2.1、用户已经登录成功并返回token值；
2.1.1、lock 锁屏场景;
2.1.2、用户重新定位到登录页面;
2.1.3、根据用户是否有roles信息，进行不同的业务逻辑，如下：
(1)、初始情况下,用户roles信息为空;
通过store.dispatch('GetInfo')调取接口,获取用户信息;
获取到roles信息后,将roles,name,avatar保存到vuex;
同时,通过store.dispatch('GenerateRoutes', { roles })去重新过滤和生成路由，并将重新生成之后的权限路由'routes'保存到vuex;
最后,通过router.addRoutes()合并路由表;
如果在获取用户信息接口时，出现错误，则调取store.dispatch('FedLogOut')接口，返回到login页面;
用户FedLogOut之后，需要情况vuex和localStorage中的token信息;
(2)、用户已经拥有roles信息；
点击页面路由，通过roles权限判断 hasPermission();
如果用户有该路由权限，直接跳转对应的页面；如果没有权限，则跳转至401提示页面;
2.2、用户没有获取到token值；
2.2.1、如果设置了白名单用户，则直接跳转到相应的页面;反之，则跳转至登录页面;
复制代码3.通过路由导航钩子函数router.afterEach(),做收尾工作
如下：
3.1、NProgress.done() // 结束Progress
3.2、获取到title并设置title;
复制代码详细代码，请参考src/permission.js
4.权限演示说明
测试账号:
（1）. username: admin，password: 123456；admin拥有最高权限，可以查看所有的页面和按钮；
（2）. username: editor，password: 123456；editor只有被赋予权限的页面和按钮才可以看到；
三级导航菜单顶部栏展示
如图所示,在完成一般后台系统所具有的二级导航菜单功能之后,我发现其实很多的后台管理系统都有三级导航菜单,但是如果都把三级菜单放到左侧菜单做阶梯状排列，就会显得比较紧凑，因此我觉得把所有的三级菜单放到顶部是一个不错的选择。
1.开发需求：
点击左侧菜单，找到其对应的菜单(顶栏菜单)排放于顶部导航栏;
2.开发步骤：
1. 定义顶部导航组件topMenu.vue；
通过element-ui,NavMenu 导航菜单来进行顶部菜单的展示，注意顶栏和侧栏设置的区别；同时将其引用于头部组件headNav.vue中;
2. 定义顶栏路由数据router/topRouter.js；
格式如下：
export const topRouterMap = [
{
'parentName':'infoShow',
'topmenulist':[
{
path: 'infoShow1',
name: 'infoShow1',
meta: {
title: '个人信息子菜单1',
icon: 'fa-asterisk',
routerType: 'topmenu'
},
component: () => import('@/page/fundList/moneyData')
}
]
},
{
'parentName':'chinaTabsList',
'topmenulist':[
{
path:'chinaTabsList1',
name:'chinaTabsList1',
meta:{
title:'区域投资子菜单1',
icon:'fa-asterisk',
routerType:'topmenu'
},
component: () => import('@/page/fundList/moneyData')
}
]
}
]
复制代码定义topRouterMap为路由总数组；通过parentName来与左侧路由建立联系;通过topmenulist表示该顶栏路由的值；通过meta.routerType的值为"topmenu"或"leftmenu"来区分是顶栏路由，还是左侧路由；
3. 准备headNav.vue中渲染数据；
思路：点击左侧菜单，需要显示顶部对应的菜单。因为左侧菜单要和顶部菜单建立联系。我们知道导航菜单在用户登录时，会根据用户的role信息进行权限过滤；那么，在过滤权限路由数据之前，我们可以通过addTopRouter()将所有的三级菜单进行过滤添加，添加完成之后，继续进行角色过滤，可以保证将不具备权限的顶部菜单也过滤掉。
// 通过循环过滤，生成新的二级菜单
function addTopRouter(){
asyncRouterMap.forEach( (item) => {
if(item.children && item.children.length >= 1){
item.children.forEach((sitem) => {
topRouterMap.forEach((citem) => {
if(sitem.name === citem.parentName){
let newChildren = item.children.concat(citem.topmenulist);
item.children = newChildren;
}
})
})
}
})
return asyncRouterMap;
}
复制代码4.点击左侧菜单过滤路由并显示对应数据；
在组件topMenu.vue中，用户默认进来或者点击左侧菜单，触发setLeftInnerMenu()函数，如下：
setLeftInnerMenu(){
if(this.$route.meta.routerType == 'leftmenu'){ // 点击的为 左侧的2级菜单
this.$store.dispatch(''ClickLeftInnerMenu,
{'name':this.$route.name}
);
}else{ // 点击顶部的菜单
this.$store.dispatch('ClickTopMenu',
{'title':this.$route.meta.title}
);
}
}
复制代码通过当前路由this.store触发异步动作'ClickLeftInnerMenu'并传递参数'name',vuex中通过state.topRouters = filterTopRouters(state.routers,data)过滤当前路由信息；代码如下：
// 获取到当前路由对应顶部子菜单
function filterTopRouters(data){
let topRouters = topRouterMap.find((item)=>{
return item.parentName === data.name
})
if(!mutils.isEmpty(topRouters)){
return topRouters.topmenulist;
}
}
复制代码topMenu.vue中，通过 computed:{ ...mapGetters(['topRouters'])}进行对应顶部路由数据的展示。用户每次点击左侧菜单时，顶部路由都进行了重新赋值并渲染，保证了数据的准确性。
5.顶部菜单完善;
当顶部菜单的数据量过大时，我们需要设置横向滚动条并设置滚动条的样式。 如图：
mock数据详解
easy-mock使用
1.Easy Mock介绍：
- Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务，
- Easy Mock 支持基于 Swagger 创建项目，以节省手动创建接口的时间；
- 简单点说：Easy Mock就是一个在线创建mock的服务平台，帮你省去你 配置、安装、起服务、维护、多人协作Mock数据不互通等一系列繁琐的操作， 它能在不用1秒钟的时间内给你所要的一切。
详细使用方法，包含新建项目，基础语法，数据占位符，Swagger等介绍和使用，请参考详细文档
2.easy-mock，在本项目中的使用：
1. 按照官方文档，创建个人项目vue-touzi-admin；
根据项目需要，创建的接口有：用户登录接口："/user/login";获取用户信息接口："/user/info";用户登出接口："/user/logout";获取所有用户列表接口："/user/getUserList";如图：
登录接口在easy-mock端编写的逻辑如下：
{
code: function({
_req
}) {
if (_req.body.username === "admin" || _req.body.username === "editor" && _req.body.password === "123456") {
return 200
} else {
return -1
}
},
message: function({
_req
}) {
if (_req.body.username !== "admin" || _req.body.username !== "editor") {
return "账号或密码有误！"
}
},
data: function({
_req
}) {
if (_req.body.username == "admin" && _req.body.password === "123456") {
return {
code: 0,
roles: ['admin'],
token: 'admin',
introduction: '我是超级管理员',
name: 'Super Admin'
}
} else if (_req.body.username === 'editor' && _req.body.password === "123456") {
return {
code: 0,
roles: ['editor'],
token: 'editor',
introduction: '我是编辑',
name: 'Normal Editor'
}
} else {
return "账号或密码有误！"
}
}
}
复制代码2. 开发环境和生产环境地址配置；
开发环境：NODE_ENV = development；生产环境，NODE_ENV =production；如下：
NODE_ENV = development
VUE_APP_URL = "https://easy-mock.com/mock/5cd03667adb0973be6a3d8d1/api"
复制代码3.接口封装实例；
如下：
import request from '@/utils/axios'
import baseUrl from '@/utils/env'
export function login(username, password) {
return request({
url: baseUrl.app_url+'/user/login',
method: 'post',
data: {
username,
password
}
})
}
复制代码mockjs使用
1.使用背景：
在使用easy-mock模拟数据的过程中，发现其对表格固定数据不能实现增删改等功能，因而选择了使用mockjs;
2.介绍及功能：
Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
1.根据数据模板生成模拟数据，通过mockjs提供的方法,你可以轻松地创造大量随机的文本,数字,布尔值,日期,邮箱,链接,图片,颜色等.
2.模拟 Ajax 请求，生成并返回模拟数据，mockjs可以进行强大的ajax拦截.能判断请求类型,获取到url,请求参数等.然后可以返回mock的假数据,或者你自己编好的json文件.功能强大易上手.
3.基于 HTML 模板生成模拟数据
3.mockjs在本项目中使用：
1. 安装mockjs
npm install mockjs --save-dev
复制代码2.创建mock文件夹结构并定义相关的功能模块；
如图：
import Mock from 'mockjs'
import tableAPI from './money'
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({
timeout: '300-600'
})
// 资金相关
Mock.mock(/\/money\/get/, 'get', tableAPI.getMoneyList)
Mock.mock(/\/money\/remove/, 'get', tableAPI.deleteMoney)
Mock.mock(/\/money\/batchremove/, 'get', tableAPI.batchremoveMoney)
Mock.mock(/\/money\/add/, 'get', tableAPI.createMoney)
Mock.mock(/\/money\/edit/, 'get', tableAPI.updateMoney)
复制代码mockjs/money.js，则定义相关的函数，实现模拟数据的业务逻辑，比如资金流水数据的增删改查等；数据的生成规则请参照mockjs官网文档，上面有详细的语法说明；
3.在main.js中引入定义好的mockjs;
如下：
import './mockjs' //引用mock
复制代码4.mockjs,api接口封装；
src/api/money.js中，进行了统一的接口封装，在页面中调用对应函数，即可获取到相应的模拟数据。代码如下：
import request from '@/utils/axios'
export function getMoneyIncomePay(params) {
return request({
url: '/money/get',
method: 'get',
params: params
})
}
export function addMoney(params) {
return request({
url: '/money/add',
method: 'get',
params: params
})
}
复制代码5.组件中，接口调用，获取数据，渲染页面；
vue-cli3.0 升级记录
由于项目早期使用vue-cli2.0构建项目，需要进行繁琐的webpack配置；vue-cli 3.0集成了webpack配置并在性能提升上做了很大优化。因为本项目使用vue-cli3.0进行构建和升级。现将相关注意事项总结如下，详细文档，请参考官网介绍。
1.vue-cli3.0使用前提介绍
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
2.vue-cli3.0安装及使用
1.vue-cli3.x安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码如果希望还保留 vue-cli2.x 的语法或使用 2.x 的模板，建议安装 cli-init
npm install -g @vue/cli-init
# OR
yarn global add @vue/cli-init
复制代码2.使用 vue-cli3.x 创建项目
vue create 项目名称； 安装步骤选取相关的配置信息即可，直到完成。
3.新项目需要进行环境变量和模式配置
在根目录下新建文件.env.development和.env.production，分别表示开发环境和生成环境配置；主要用于定义环境变量，并通过npm run serve或npm run build集成到不同的环境中，供接口调用。代码如下：
.env.development
NODE_ENV = development
VUE_APP_URL = "https://easy-mock.com/mock/5cd03667adb0973be6a3d8d1/api"
复制代码.env.production
NODE_ENV = production
VUE_APP_URL = "https://easy-mock.com/mock/5cd03667adb0973be6a3d8d1/api"
复制代码使用方法，如本项目中，配置在utils/env.js中，代码如下：
// development和production环境是不同的
let app_url = process.env.VUE_APP_URL
export default {
app_url
}
复制代码由于我们使用easy-mock模拟数据，不存在跨域问题，所以不需要配置devServer.proxy,可以直接使用。在api中的使用方法如下：
import request from '@/utils/axios'
import baseUrl from '@/utils/env'
export function login(username, password) {
return request({
url: baseUrl.app_url+'/user/login',
method: 'post',
data: {
username,
password
}
})
}
复制代码4.使用vue.config.js编译打包详细配置
由于使用vue-cli3.x生成项目，webpack相关配置已经集成到node_module中，如果希望对 webpack 等进行细致化配置，需要在项目根目录下新建文件vue.config.js，具体配置可参考文档，下面是一份基本配置。
const TerserPlugin = require('terser-webpack-plugin') // 用于在生成环境剔除debuger和console
const path = require('path');
const resolve = dir => {
return path.join(__dirname, dir);
};
const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL // development和production环境是不同的
module.exports = {
publicPath: '/',
outputDir: './dist',
lintOnSave: false, // 关闭eslint
// 打包时不生成.map文件
productionSourceMap: false,
devServer: {
open: true,
host: '0.0.0.0',
port: 8808
// 由于本项目数据通过easy-mock和mockjs模拟，不存在跨域问题，无需配置代理;
// proxy: {
// '/v2': {
// target: target,
// changeOrigin: true
// }
// }
},
// webpack相关配置
chainWebpack: (config) => {
config.entry.app = ['./src/main.js'];
config.resolve.alias
.set('@', resolve('src'))
.set('cps', resolve('src/components'))
},
configureWebpack:config => {
// 为生产环境修改配置...
if (process.env.NODE_ENV === 'production') {
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
})
} else {
// 为开发环境修改配置...
}
},
// 第三方插件配置
pluginOptions: {
}
}
复制代码项目配置完成好，安装好所有的依赖包。执行开发环境打包命令：npm run serve,即可运行项目；执行生成环境打包命令：npm run build,即可生成生产环境文件。
技术答疑
项目说明：
小爱ADMIN是完全开源免费的管理系统集成方案，可以直接应用于相关后台管理系统模板；很多重点地方都做了详细的注释和解释。如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以提问答疑，分享学习资料； 欢迎加入答疑qq群：602515030