缘起
哈喽各位小伙伴周三好, 春节已经过去好多天了, 群里小伙伴也各种催搞了, 新年也接了新项目, 比较忙, 不过还是终于赶上这个二月的尾巴写了这篇文章, 也把 vue 权限后台上线了 (项目地址: http://123.206.33.109:2364/ , 服务器低配较慢), 因为是第一版, 功能还是比较简单, 代码的含金量上也还没有做更多的优化处理 (比如数据列表可以统一使用组件化, 以后会做优化), 不过已经基本的可以使用了, 目前 1.0 的版本是:
1, 灵活的在数据库权限配置 (核心)
2, 动态路由 + 动态标签 (重要)
3, 博客 + Tibug 项目的数据管理
4, 按钮级别的权限设计 (进行中...)
5, 其他设计, 见下文 (2.0 版本设计中)
而且, 重要的是, 我也会一直进行维护, 毕竟这个项目是配合一下几个项目一起使用的, 所以会长期使用, 不会像其他的开源作品一样, 仅仅是一个 Demo:
本文先主要是开篇, 因为其实很多内容, 咱们在《前后端分离系列中》, 已经说的很多了, 所以我能只会说一些重点的地方 (比如权限分配, 动态路由等), 不再从项目的搭建开始讲解了, 不过要是有小伙伴问的多的话, 我也可以多写一些文章, 所以关键还是互动咯.
废话不多说, 先看下整体效果, 如果对您有帮助, 可以继续往下看 :
注意: 下文只是对核心功能进行简单介绍, 具体的详细内容, 我会在之后的文章中分别讲解, 每个话题一篇文章, 这样也方便以后大家的查阅, 如果你比较着急想看到代码, 或者直接想自行研究, 直接把代码 Clone 下来研究即可, 我会在下文进行标注每一个部分所对应的代码结构位置.
一, 项目整体介绍
在上边的动图里, 大家也基本的看到了项目中的功能, 目前看起来还是比较简单的, 我开放出来了两个测试账号, 超级管理员暂时先不开放, 因为是长期开发和维护, 所以打算长期对这个项目进行设计和研究, 基本如下:
1, 文章目录:
一 || 权限后台 1.0 正式上线
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://github.com/anjoy8/Blog.Core
-- ♥ -- ♥ -- ♥ -- ♥ -- ♥ -- ♥ --
来源: https://www.cnblogs.com/laozhang-is-phi/p/10438122.html