Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

从壹开始前后端 [vue后台] 之一 || 权限后台系统 1.0 正式上线

老张的哲学 2019-02-27 11:01:00 阅读数:392 评论数:0 点赞数:0 收藏数:0

缘起

哈喽各位小伙伴周三好,春节已经过去好多天了,群里小伙伴也各种催搞了,新年也接了新项目,比较忙,不过还是终于赶上这个二月的尾巴写了这篇文章,也把 vue 权限后台上线了(项目地址:http://123.206.33.109:2364,服务器低配较慢),因为是第一版,功能还是比较简单,代码的含金量上也还没有做更多的优化处理(比如数据列表可以统一使用组件化,以后会做优化),不过已经基本的可以使用了,目前1.0的版本是:

1、灵活的在数据库权限配置(核心

2、动态路由+动态标签(重要

3、博客+Tibug项目的数据管理

4、按钮级别的权限设计(进行中...

5、其他设计,见下文(2.0版本设计中

 

而且,重要的是,我也会一直进行维护,毕竟这个项目是配合一下几个项目一起使用的,所以会长期使用,不会像其他的开源作品一样,仅仅是一个Demo:

个人博客Vue版本 tBug项目Nuxt版本 Blog.Core项目
github.com/anjoy8/Blog.Vue github.com/anjoy8/Nuxt.tBug github.com/anjoy8/Blog.Core
http://123.206.33.109:8077 http://123.206.33.109:7090 http://123.206.33.109:8081

 

本文先主要是开篇,因为其实很多内容,咱们在《前后端分离系列中》,已经说的很多了,所以我能只会说一些重点的地方(比如权限分配、动态路由等),不再从项目的搭建开始讲解了,不过要是有小伙伴问的多的话,我也可以多写一些文章,所以关键还是互动咯。

废话不多说,先看下整体效果,如果对您有帮助,可以继续往下看 :

 

 

注意:下文只是对核心功能进行简单介绍,具体的详细内容,我会在之后的文章中分别讲解,每个话题一篇文章,这样也方便以后大家的查阅,如果你比较着急想看到代码,或者直接想自行研究,直接把代码 Clone 下来研究即可,我会在下文进行标注每一个部分所对应的代码结构位置。

 

 

一、项目整体介绍

 在上边的动图里,大家也基本的看到了项目中的功能,目前看起来还是比较简单的,我开放出来了两个测试账号,超级管理员暂时先不开放,因为是长期开发和维护,所以打算长期对这个项目进行设计和研究,基本如下:

1、文章目录:

 

2、功能安排: 

  • 管理员角色分配  完成
  • 角色权限授权  完成
  • 根据权限,动态路由加载  基本完成
  • 动态标签页  基本完成
  • 按钮级别权限,无该权限不显示按钮   开发中
  • 用户操作日志  设计中 1.1
  • 增加博客系统在后台的应用,包括审核功能   待定 1.5
  • 开发细化组件,比如动态Table 待定 1.5
  • 部门权限,基于数据的权限分配   待定 2.0
  • 国际化,多语言   待定 2.0
  • 背景切换选择器   待定 2.0
  • Message站内消息推送   待定 2.0
  • Excel、PDF等导入导出  待定 2.0
  • 其他功能,大家如果有需要的,我都研究研究,添加进来。

 

 

二、权限全分配

 这一部分是整个后台的核心,也是整个项目能正常运行的基石,特别是对像我这种开源的项目,是要把测试账号和密码开放出去的,对权限这一块更要控制好,不然会出现很多问题,目前我是开放了两个测试账号,超级管理员账号还没有对外开放,只对群里部分人可是使用,开放出来的测试账号之一——test账号,看到的内容和超级管理员是一样的,只不过我禁用了新增、删除和编辑操作,只开放了 查看 的权限,正好大家可以帮我测试一下,是否真的不能修改数据,如果你能修改成功,我可以给你奖励哟。

 

1、模块分配与流程说明

这一部分涉及很多地方,目前应该有超过六成的页面都是这一块配置的:

 

  

 

 

 

老张说:

这里有小伙伴会问,为啥要把按钮放到右侧呢,直接放到树里多好呀,我是这么考虑的:

1、如果都放到树里,会显得很长很长,不好查看;

2、如果和菜单放到一起,就需要在后侧加个类型,说明当前是【按钮】还是【菜单】

而且我的项目也支持这种合并在一起的功能,不信你可以看,具体如何操作的,以后的文章详细说明:

 

 

 

 

整体的操作很简单:

如果新入职一个管理员,我们就先【新建一个管理用户】,然后再看是否有合适的角色信息,如果有继续,如果没有则【新建角色】,

接下来我们需要检查某些页面和接口是否已经录入到了后台,如果录入了,就可以对刚刚创建的角色,进行菜单权限分配,如果没有录入菜单目录和接口,那我们就需要先录入【接口信息】,然后添加【菜单信息(包括按钮)】,然后继续分配权限,很简单的流程图:

 

 

2、API接口地址

上边所对应的接口信息,已经提交到Github里,结构是:

├── Controllers // 控制器
│ ├── BlogController.cs
│ ├── ClaimsController.cs
│ ├── LoginController.cs
│ ├── ModuleController.cs // API接口控制器
│ ├── PermissionController.cs // 菜单接口控制器
│ ├── RoleController.cs // 角色接口控制器
│ └── UserController.cs // 管理用户接口控制器

 

 

 

三、动态路由菜单

动态路由也是一个很重要而且也是必须的一个功能,在上边我们的【超级管理员或者开发人员】将权限分配完成后,我们就需要将这个管理员的账号密码发给新入职的员工,当新员工登录成功后,必须生成一个属于当前角色的左侧导航条,大家可以自己体会下,我给大家的两个账号【test】和【test2】权限是不一样的,所以对应的菜单也是不一样的,具体的大家可以自行体会。

这里你一定又会问,那如果该用户偷偷看到超级管理员的URL地址了,岂不是不安全了么,当然不是,我的后台项目设计权限的时候,不仅仅是对菜单的控制,对API也控制了,你仔细想想,是不是每一个菜单或者按钮都会对应一个API地址,就算突然访问不属于自己的,也只能是 403 无权限。

 

 

 

1、内容地址

这一块的内容主要是在 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>

 

 

四、动态标签页

这个功能倒不是一个核心功能,是属于一个锦上添花的小技巧,但是使用多了,也是一个很有依赖性的一个工具,特别是那些经常需要操作后台的工作人员,如果每次都需要从左侧导航条翻找,也是很麻烦的一件事,所以就提供了这一个功能,可以很好的提高效率。

 

其实这个动态标签页有两种写法,也各种利弊,我会在以后的文章中,重点讲解这两个方法。

 

1、功能结构地址

 <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 页面中,手动设置按钮是否显示,这里我想到了是两个办法;

1、与后端开发人员进行商议,比如【添加==ADD】、【编辑==EDIT】等等这样特定的字符约定。

2、因为之前分配权限的时候,对每一个菜单/按钮,都匹配了 API 接口地址,比如用户页【添加==/api/user/post】,这也是一种约定。

具体采用哪种方法,在以后详细的文章中,我再深入讨论。

 

好啦,今天这篇开篇文章就先说到这里吧,希望对大家有所帮助,从3月起,要开始学Id4了,这次是真的了。

 

 

六、Github && Gitee

https://github.com/anjoy8/Blog.Admin 前端

https://github.com/anjoy8/Blog.Core

 

-- -- -- -- -- -- --

版权声明
本文为[老张的哲学]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/laozhang-is-phi/p/10438122.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领