哈喽各位小伙伴周三好,春节已通过去好多天了,群里小伙伴也各类催搞了,新年也接了新项目,比较忙,不过仍是终于遇上这个二月的尾巴写了这篇文章,也把 vue 权限后台上线了(项目地址:http://vueadmin.neters.club,国外服务器,较慢,若是你想要核心的这些Sql数据,能够看开源地址https://github.com/anjoy8/Blog.Data.Share/tree/master/Blog.Core.Data.json,这个项目的后端,就是你们一直跟着学的 Blog.Core 项目 github.com/anjoy8/Blog.Core),由于是初版,功能仍是比较简单,代码的含金量上也尚未作更多的优化处理(好比数据列表能够统一使用组件化,之后会作优化),不过已经基本的可使用了,目前1.0的版本是:html
一、灵活的在数据库权限配置(核心)前端
二、动态路由+动态标签(重要)vue
三、博客+Tibug项目的数据管理git
四、按钮级别的权限设计(进行中...)github
五、其余设计,见下文(2.0版本设计中)数据库
并且,重要的是,我也会一直进行维护,毕竟这个项目是配合一下几个项目一块儿使用的,因此会长期使用,不会像其余的开源做品同样,仅仅是一个Demo:json
我的博客Vue版本 | tBug项目Nuxt版本 | Blog.Core项目 |
---|---|---|
github.com/anjoy8/Blog.Vue | github.com/anjoy8/Nuxt.tBug | github.com/anjoy8/Blog.Core |
http://vueblog.neters.club | http://tibug.neters.club | http://apk.neters.club |
本文先主要是开篇,由于其实不少内容,我们在《先后端分离系列中》,已经说的不少了,因此我能只会说一些重点的地方(好比权限分配、动态路由等),再也不从项目的搭建开始讲解了,不过要是有小伙伴问的多的话,我也能够多写一些文章,因此关键仍是互动咯。后端
废话很少说,先看下总体效果,若是对您有帮助,能够继续往下看 👍:api
注意:下文只是对核心功能进行简单介绍,具体的详细内容,我会在以后的文章中分别讲解,每一个话题一篇文章,这样也方便之后你们的查阅,若是你比较着急想看到代码,或者直接想自行研究,直接把代码 Clone 下来研究便可,我会在下文进行标注每个部分所对应的代码结构位置。数组
在上边的动图里,你们也基本的看到了项目中的功能,目前看起来仍是比较简单的,我开放出来了两个测试帐号,超级管理员暂时先不开放,由于是长期开发和维护,因此打算长期对这个项目进行设计和研究,基本以下:
这一部分是整个后台的核心,也是整个项目能正常运行的基石,特别是对像我这种开源的项目,是要把测试帐号和密码开放出去的,对权限这一块更要控制好,否则会出现不少问题,目前我是开放了两个测试帐号,超级管理员帐号尚未对外开放,只对群里部分人但是使用,开放出来的测试帐号之一——test帐号,看到的内容和超级管理员是同样的,只不过我禁用了新增、删除和编辑操做,只开放了 查看 的权限,正好你们能够帮我测试一下,是否真的不能修改数据,若是你能修改为功,我能够给你奖励哟。
这一部分涉及不少地方,目前应该有超过六成的页面都是这一块配置的:
老张说:
这里有小伙伴会问,为啥要把按钮放到右侧呢,直接放到树里多好呀,我是这么考虑的:
一、若是都放到树里,会显得很长很长,很差查看;
二、若是和菜单放到一块儿,就须要在后侧加个类型,说明当前是【按钮】仍是【菜单】
并且个人项目也支持这种合并在一块儿的功能,不信你能够看,具体如何操做的,之后的文章详细说明:
总体的操做很简单:
若是新入职一个管理员,咱们就先【新建一个管理用户】,而后再看是否有合适的角色信息,若是有继续,若是没有则【新建角色】,
接下来咱们须要检查某些页面和接口是否已经录入到了后台,若是录入了,就能够对刚刚建立的角色,进行菜单权限分配,若是没有录入菜单目录和接口,那咱们就须要先录入【接口信息】,而后添加【菜单信息(包括按钮)】,而后继续分配权限,很简单的流程图:
上边所对应的接口信息,已经提交到Github里,结构是:
├── Controllers // 控制器 │ ├── BlogController.cs │ ├── ClaimsController.cs │ ├── LoginController.cs │ ├── ModuleController.cs // API接口控制器 │ ├── PermissionController.cs // 菜单接口控制器 │ ├── RoleController.cs // 角色接口控制器 │ └── UserController.cs // 管理用户接口控制器
动态路由也是一个很重要并且也是必须的一个功能,在上边咱们的【超级管理员或者开发人员】将权限分配完成后,咱们就须要将这个管理员的帐号密码发给新入职的员工,当新员工登陆成功后,必须生成一个属于当前角色的左侧导航条,你们能够本身体会下,我给你们的两个帐号【test】和【test2】权限是不同的,因此对应的菜单也是不同的,具体的你们能够自行体会。
这里你必定又会问,那若是该用户偷偷看到超级管理员的URL地址了,岂不是不安全了么,固然不是,个人后台项目设计权限的时候,不只仅是对菜单的控制,对API也控制了,你仔细想一想,是否是每个菜单或者按钮都会对应一个API地址,就算忽然访问不属于本身的,也只能是 403 无权限。
这一块的内容主要是在 App.vue 中,你们能够放到 Layout.vue 模板里边,也能够本身定义一个组件,好比 slider.vue 等等,我当时着急写代码,就所有写到入口文件 App.vue 里了,可能在2.0版本会对其修改优化,目前1.0版本会保留这个操做:
重点就在这个数组 routes里
<template v-for="(item,index) in routes" v-if="!item.hidden"> <template v-if="item.children"> <el-submenu :index="index+''" v-if="!item.leaf"> <template slot="title"> <i class="fa" :class="item.iconCls"></i> <span class="title-name" slot="title">{{item.name}}</span> </template> <el-menu-item class="title-name" v-for="child in item.children" :index="child.path" :key="child.id" :base-path="it v-if="!child.hidden">{{child.name}} </el-menu-item> </el-submenu> <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}} </el-menu-item> </template> <template v-else> <el-menu-item :index="item.path"> <i class="fa" :class="item.iconCls"></i> <template slot="title"> <span class="title-name" slot="title">{{item.name}}</span> </template> </el-menu-item> </template> </template> <ul> <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> <span class="tag-dot-inner"></span> <router-link :to="item.path" class="tags-li-title"> {{item.title}} </router-link> <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> </li> </ul>
这个功能倒不是一个核心功能,是属于一个锦上添花的小技巧,可是使用多了,也是一个颇有依赖性的一个工具,特别是那些常常须要操做后台的工做人员,若是每次都须要从左侧导航条翻找,也是很麻烦的一件事,因此就提供了这一个功能,能够很好的提升效率。
其实这个动态标签页有两种写法,也各类利弊,我会在之后的文章中,重点讲解这两个方法。
<ul> <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> <span class="tag-dot-inner"></span> <router-link :to="item.path" class="tags-li-title"> {{item.title}} </router-link> <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> </li> </ul>
还有的就是利用 sessionStorage.getItem('Tags') 来对动态标签的记录,详细的内容之后会讲解。
在上边的文章中,咱们说到了动态菜单导航,根据不一样的权限加载不一样的导航菜单,那每一个菜单中的按钮,也应该这么操做,若是没有对当前用户赋予某些按钮权限,就不能对这些按钮进行显示。
好比我对开放的两个【测试帐号】的【添加】、【编辑】、【删除】都禁用权限,那页面中的按钮就不能显示出来,由于我想让你们看到效果,因此这一块尚未写,等下周我会把这个权限加上去,这样没权限的按钮就都不会显示了。
思路:
目前采用的是获取当前菜单的所有接口,在 .vue 页面中,手动设置按钮是否显示,这里我想到了是两个办法;
一、与后端开发人员进行商议,好比【添加==ADD】、【编辑==EDIT】等等这样特定的字符约定。
二、由于以前分配权限的时候,对每个菜单/按钮,都匹配了 API 接口地址,好比用户页【添加==/api/user/post】,这也是一种约定。
具体采用哪一种方法,在之后详细的文章中,我再深刻讨论。
好啦,今天这篇开篇文章就先说到这里吧,但愿对你们有所帮助,从3月起,要开始学Id4了,此次是真的了😂。
https://github.com/anjoy8/Blog.Admin 前端
https://github.com/anjoy8/Blog.Core
-- ♥ -- ♥ -- ♥ -- ♥ -- ♥ -- ♥ --