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

缘起

哈喽各位小伙伴周三好，春节已经过去好多天了，群里小伙伴也各种催搞了，新年也接了新项目，比较忙，不过还是终于赶上这个二月的尾巴写了这篇文章，也把 vue 权限后台上线了（项目地址：http://vueadmin.neters.club，开源地址: https://github.com/anjoy8/Blog.Admin . 国外服务器，较慢，如果你想要核心的这些Sql数据，可以看开源地址https://github.com/anjoy8/Blog.Core/tree/master/Blog.Core.Api/wwwroot/BlogCore.Data.json，这个项目的后端，就是大家一直跟着学的 Blog.Core 项目 github.com/anjoy8/Blog.Core），因为是第一版，功能还是比较简单，代码的含金量上也还没有做更多的优化处理，不过已经基本的可以使用了，目前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://vueblog.neters.club	http://tibug.neters.club	http://apk.neters.club

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

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

本项目地址:http://vueadmin.neters.club(在线项目需要登录,自行去认证平台注册即可)

开源地址:https://github.com/anjoy8/Blog.Admin

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

一、项目整体介绍

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

1、文章目录：

2、功能安排：

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

二、权限全分配

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

1、模块分配与流程说明

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

老张说：

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

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

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

而且我的项目也支持这种合并在一起的功能，不信你可以看，其实很简单的，自己挪一下，加个type就行了：

整体的操作很简单：

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

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

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>

四、动态标签页

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

其实这个动态标签页有两种写法，好像一个是sessionStorage，一个是LocalStorage，也各种利弊，不多说了，百度一下就知道了。

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

-- ♥ -- ♥ -- ♥ -- ♥ -- ♥ -- ♥ --

posted @ 2019-02-27 11:01 老张的哲学阅读(45801) 评论(65) 编辑收藏举报

刷新页面返回顶部

老张的哲学

随笔 - 90 文章 - 0 评论 - 2705 字数 - 368,000