緣起
哈嘍各位小伙伴周三好，春節已經過去好多天了，群里小伙伴也各種催搞了，新年也接了新項目，比較忙，不過還是終於趕上這個二月的尾巴寫了這篇文章，也把 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的版本是：
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 |
本文先主要是開篇，因為其實很多內容，咱們在《前后端分離系列中》，已經說的很多了，所以我能只會說一些重點的地方（比如權限分配、動態路由等），不再從項目的搭建開始講解了，不過要是有小伙伴問的多的話，我也可以多寫一些文章，所以關鍵還是互動咯。
廢話不多說，先看下整體效果，如果對您有幫助，可以繼續往下看 👍：
注意：下文只是對核心功能進行簡單介紹，具體的詳細內容，我會在之后的文章中分別講解，每個話題一篇文章，這樣也方便以后大家的查閱，如果你比較着急想看到代碼，或者直接想自行研究，直接把代碼 Clone 下來研究即可，我會在下文進行標注每一個部分所對應的代碼結構位置。
一、項目整體介紹
在上邊的動圖里，大家也基本的看到了項目中的功能，目前看起來還是比較簡單的，我開放出來了兩個測試賬號，超級管理員暫時先不開放，因為是長期開發和維護，所以打算長期對這個項目進行設計和研究，基本如下：
1、文章目錄：
- 一 || 權限后台1.0正式上線
- 二 || 完美實現 JWT 滑動授權刷新
- 三 || 動態路由配置 & 項目快速開發
- 四 || NetCore + SignalR 實現日志消息推送
- 五 ║ 實現『按鈕』級別權限配置
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
-- ♥ -- ♥ -- ♥ -- ♥ -- ♥ -- ♥ --