vue实现后台管理权限系统和顶栏三级菜单显示功能

效果演示地址

项目演示演示

重要功能概述

执行权力职能

权限路由想法：

根据用户登录的角色信息和路由中配置的角色信息，生成可访问路由表，并通过路由器动态添加可访问权限路由表。添加路线(商店。吸气剂。addroutes)，以便显示左侧和顶部栏菜单。

实施步骤：

1.在router/index.js中，设置相应菜单的默认角色信息；

“权限设置”菜单的权限设置如下：meta:{ roles 3360[' admin '，' editor']}，不同角色可以看到；赋予其子菜单“page permission”，并将权限设置为：meta:{ roles 3360[' admin ']}，这意味着只有' admin '才能看到菜单；将子菜单“按钮权限”的权限设置为：meta: {role: [“编辑器”]}，这意味着只有“编辑器”可以看到此菜单。

2.通过router.beforeEach()和router.afterEach()进行路由过滤和权限拦截；

代码如下：

//权限判断function function hasPermission(roles，permissionRoles){ if(roles . indexof(' admin ')=0)返回true //admin权限直接传递if(！权限角色)返回真返回角色。一些(角色=权限角色。(角色)=0)的索引} const白名单=['/log in ']//不要重定向白名单路由器，beforeEach((to，From，next)={nprogress。start()//设置浏览器头标题const browserhaderttle=to . meta . title store . submit(' Set _ browserhaderttle '，{ browserhaderttle : browserhaderttle })//当您单击登录时，您将获得令牌并将其保存在vuex中；if (getToken()) { /*有token */if(store . getters . islock to . path！=='/lock '){ next({ path : '/lock ' })n progress . done()} else if(to。path==='/' log in '){ next({ path 3360 '/' })//将匹配path: '。nprogress . done()} else { if(store . getter s . roles . length===0){ store . dispatch(' Getinfo ')。然后(res={ //获取用户信息const roles=RES . roles store . dispatch('生成路由'，{roles })。然后(()={//生成路由器的可访问路由表。添加路线(商店。吸气剂。add routes)//动态添加可访问的路由表接下来({ 0.to，replace: true }) //hack方法确保addRoutes完成}))。catch((err)={ store . dispatch(' fed log out ')。然后(()={message.error (err | | '验证失败，请重新登录')next({ path : '/' })} } } else {//如果不需要动态更改权限，可以直接next()删除较低的权限判断(If)有权限(store。吸气剂。roles，to . meta . roles)){ next()//} else { next({ path : '/401 '，replace: true，query : { nogoback : true } })} } } else { if(白名单.索引Of(to.path)！==-1) {next()} else {//当您单击exit时，将位于此处next('/log in ')n Progress . done()} })router . after after(()={ n Progress . done()//end Progress setTimeout(()={ Const browserhaderttle=store。吸气剂。browserhaderttle settitle(browserhaderttle)}，0)})用户点击登录后的业务逻辑分析：

1.用户调用登录界面，获取令牌，通过路由跳转到首页；

2.通过路由导航挂钩路由器确定下一个跳转逻辑。beforeeach ((to，from，next)=})，如下所示：2.1。用户已成功登录并返回令牌值；

2.1.1.锁屏锁定场景；

2.1.2.用户重新定位到登录页面；

2.1.3、根据用户是否有角色信息，进行不同的业务逻辑，如下：

(1)初始情况下，用户角色信息为空；

通过store.dispatch('GetInfo ')调用接口获取用户信息；获取角色信息后，将角色、姓名、头像保存到vuex同时，通过store.dispatch重新过滤生成路由('生成路由'，{roles})，将重新生成的授权路由' routes '保存到vuex最后通过router.addRoutes()合并路由表；如果获取用户信息界面有错误，调用store.dispatch('FedLogOut ')界面，返回登录页面；用户需要FedLogOut后vuex和localStorage中的令牌信息；

(2)用户已经有角色信息；

点击页面路由，通过角色权限判断hasPermission()；如果用户有路由权限，直接跳转到对应页面；如果没有权限，跳转到401提示页面；

2.2.用户未获得令牌值；

2.2.1.如果设置了白名单用户，直接跳转到对应页面；否则，跳转到登录页面；

3.通过router . after(()={ })的路由导航钩子功能，做如下收尾工作：3.1。npprogress . done()//End progress 3.2 .获取标题并设置；

有关详细代码，请参见src/permission.js

4.权限演示说明

测试账号：

(1).用户名： admin，密码： 123456；Admin拥有最高权限，可以查看所有页面和按钮；

(2).用户名：编辑器，密码： 123456；编辑器只能在已授予权限的页面和按钮上看到；

三级导航菜单的顶部栏显示

如图，完成一般后台系统的两级导航菜单功能后，我发现很多后台管理系统其实都有三级导航菜单，但是如果把三级菜单都放在左边菜单进行阶梯排列，会更加紧凑，所以我觉得把三级菜单都放在最上面是一个不错的选择。

开发要求：点击左侧菜单，找到其对应的菜单(顶栏菜单)，排列在顶部导航栏中；

开发步骤：

1.定义顶部导航组件topMenu.vue；

通过element-UI和navmenu导航菜单展示顶部菜单，注意顶部栏和侧边栏设置的区别；同时在headNav.vue头部组件中引用；

2.定义顶列路由数据路由器/toprouter . js；

格式如下：

export const topRouterMap=[{ ' parentName ' : ' infoShow '，' topmenulist ' :[{ path : ' infoShow 1 '，name: 'infoShow1 '，Meta: {title: '个人信息子菜单1 '，图标： ' FA-星号'，路由器类型： '顶部菜单' }，Component :()=Import(' @/Page/fund list/money data ')} } }，{ '通过parentName与左侧路线建立联系；顶部列路由的值由topmenulist表示；meta.routerType的值为“topmenu”或“leftmenu”，以区分顶部列路由和左侧路由。

3.准备headNav.vue中的渲染数据；

想法：点击左侧菜单，需要显示顶部对应的菜单。因为左边的菜单要和最上面的菜单连接。我们知道用户登录时，导航菜单会根据用户的角色信息过滤权限；然后，在过滤权限路由数据之前，我们可以通过addTopRouter()过滤并添加所有三级菜单。添加之后，我们可以继续过滤角色，确保没有权限的顶级菜单被过滤掉。

//通过循环过滤，生成新的二级菜单函数addtoprouter(){ asyncroutermap . foreach((item)={ if(item。children item . children . length=1){ item。children . foreach((sitem))={ toproutermap . foreach((citem)={ if(sitem . name===citem . parentname){ let new children=item . children . concat(citem . topmenulist)；item.children=newChildren} }) }) })返回asyncRouterMap}4.点击左侧菜单，过滤路线并显示相应数据；

在组件topMenu.vue中，用户默认输入或点击左侧菜单触发setLeftInnerMenu()功能，如下所示：

setleftinernermenu(){ if(this。$ route . meta . router type==' left menu '){//左二级菜单this。$ store . dispatch(' click left nnermunu，{'name' : this。$ route.name})被单击；}else{ //点击顶部菜单this。$ store.dispatch('点击顶部菜单'，{'title' : this。$ route . meta . title })；}}从当前路线的价值来看。$route.meta.routerType，无论用户是单击顶部菜单还是左侧菜单。如果您单击顶部菜单，触发异步操作“单击左侧菜单”，并通过它传递参数“名称”。$store，并通过状态过滤当前路由信息。toprouters=filtertoprouters(状态。路由器、数据)在Vuex代码如下：

//获取函数filter toproutes(data){ let toproutes=toproutermap . find((item)={ return item . parent name===data . name })if(！mutils . isempty(topRouters)){ return topRouters . topmenulist；}}topMenu.vue，通过computed:显示相应的顶级路由数据{.map getter([' top routers '])}。每次用户点击左侧菜单时，顶部路线都会被重新分配和渲染，以确保数据的准确性。

5.顶层菜单完美；

当顶部菜单中的数据量太大时，我们需要设置水平滚动条并设置滚动条的样式。如图所示：

模拟数据的详细解释

易于模拟使用

简易模拟简介：

Easymock是一个可视化的持久服务，可以快速生成模拟数据。Easymock支持基于Swagger创建项目，节省手动创建接口的时间；简单来说：Easy mock是一个在线创建mock的服务平台，可以帮你省去配置、安装、启动服务、维护、多人协作、数据互通等一系列繁琐的操作。它能在不到一秒钟的时间里给你想要的一切。

详细的使用方法，包括新项目的介绍和使用、基本语法、数据占位符、Swagger等。请参考详细文件

简单模拟，用于本项目：

1.根据官方文件，创建一个个人项目vue-touzi-admin；

根据项目需要，创建的界面有：用户登录界面：'/user/log in '；获取用户信息界面：“/user/info”；用户注销界面：“/user/注销”；获取所有用户列表界面：“/user/getuser list”；如图所示：

在easy-mock端编写的登录界面逻辑如下：

{ code:函数({ _req }) { if (_req.body.username==' admin ' | _ req . body . username==' editor ' _ req . body . password==' 123456 '){ return 200 } else { return-1 } }，message:函数({ _ req }){ if(_ req . body . username！=='admin' || _req.body.username！=='editor') {return '账号或密码错误！} }，data:函数({ _ req }){ if(_ req . body . username=' Admin ' _ req . body . password==' 123456 '){ return { code : 0 0，roles 3360[' Admin ']，Token : ' admin '，introduction : '我是超级管理员'，name : ' Super Admin ' } } else if(_ req body . username==' editor ' _ req . body . password='='}}} 1.WebPack中开发环境和生产环境的地址配置；生产环境，node _ NODE_ENV:“”生产“”；如下所示：

模块。导出=合并(prodenv，{node _ env3360'' development ' '，API _ base _ URL 3360 ' ' https://easy-mock.com/mock/5cd03667adb0973be6a3d8d1/API'',})3。接口封装实例如下：

mockjs使用的来自“@/utils/axios”导出函数login(用户名，密码){ return request({ URL : process . env . API _ BASE _ URL '/user/log in '，Method :' post '，data : {username，密码}})的导入请求

使用背景：

在使用easy-mock模拟数据的过程中，发现它不能添加、删除和修改表的固定数据，所以选择了mockjs

简介和功能：

Mock.js是一个模拟数据生成器，旨在帮助前端攻城工程师独立于后端进行开发并编写单元测试。提供了以下模拟功能：

1.根据数据模板生成模拟数据，可以轻松创建大量的随机文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

2.模拟ajax请求，生成并返回模拟数据。mockjs可以有力地拦截Ajax。它可以判断请求类型，获取url，请求参数等。然后可以返回自己编译的mock或者json文件的假数据。它功能强大，易于使用。

3.基于HTML模板生成仿真数据

Mockjs用于此项目：

1.安装mockjs

npm安装mockjs -保存-开发

2.创建模拟文件夹结构，定义相关功能模块；如图所示：

Mockjs/index.js负责定义相关的mock接口。如下所示：从“mock js”导入mock，从“tableapi”导入。/money//设置全局延迟。如果没有延迟，有时将检测不到数据变化。建议保留mock . setup({ time out : ' 300-600 ' })//fund相关的Mock.mock(/\ /money\/get/，' get '，tableapi . getmoney list)mock .(/\/money \/remove/，' get '，tableapi . deletemoney)mock .(/\/money \/batchremove/，' get '，tableapi . batchremovemoney)mock .(/\/money \/add/，' get '，tableapi.createmoney。

3.将定义好的mockjs引入main.js如下所示：

“进口”。/mockjs' /引用mock

4.mockjs，api接口封装；

在src/api/money.js中，进行统一的接口封装，通过调用页面中相应的函数可以得到相应的仿真数据。代码如下：

来自“@/utils/axios”导出函数GetMoneyIncomePay(Params){ Return request({ URL : '/money/get '，method: 'get '，Params : params})的导入请求} Export函数addmoney(Params){ Return request({ URL : '/money/add '，method :' get '，Params : Params })5。在组件中，调用接口获取数据并呈现页面；

摘要

以上是边肖介绍的后台管理权限系统和顶栏三级菜单显示功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！