緣起

哈嘍各位小伙伴周三好，春節(jié)已經(jīng)過去好多天了男杈，群里小伙伴也各種催搞了找前，新年也接了新項目糟袁，比較忙，不過還是終于趕上這個二月的尾巴寫了這篇文章躺盛，也把 vue 權(quán)限后臺上線了（項目地址：http://123.206.33.109:2364项戴，服務(wù)器低配較慢，如果你想要核心的這些Sql數(shù)據(jù)槽惫，可以進(jìn)群周叮，查看群文件，這個項目的后端界斜，就是大家一直跟著學(xué)的 Blog.Core 項目 github.com/anjoy8/Blog.Core）仿耽，因為是第一版，功能還是比較簡單锄蹂，代碼的含金量上也還沒有做更多的優(yōu)化處理（比如數(shù)據(jù)列表可以統(tǒng)一使用組件化氓仲，以后會做優(yōu)化），不過已經(jīng)基本的可以使用了得糜，目前1.0的版本是：

1敬扛、靈活的在數(shù)據(jù)庫權(quán)限配置（核心）

2、動態(tài)路由+動態(tài)標(biāo)簽（重要）

3朝抖、博客+Tibug項目的數(shù)據(jù)管理

4啥箭、按鈕級別的權(quán)限設(shè)計（進(jìn)行中...）

5、其他設(shè)計治宣，見下文（2.0版本設(shè)計中）

而且急侥，重要的是，我也會一直進(jìn)行維護(hù)侮邀，畢竟這個項目是配合一下幾個項目一起使用的坏怪，所以會長期使用，不會像其他的開源作品一樣绊茧，僅僅是一個Demo：

本文先主要是開篇铝宵，因為其實很多內(nèi)容，咱們在《前后端分離系列中》，已經(jīng)說的很多了鹏秋，所以我能只會說一些重點的地方（比如權(quán)限分配尊蚁、動態(tài)路由等），不再從項目的搭建開始講解了侣夷，不過要是有小伙伴問的多的話横朋，我也可以多寫一些文章，所以關(guān)鍵還是互動咯百拓。

廢話不多說琴锭，先看下整體效果，如果對您有幫助衙传，可以繼續(xù)往下看 ??：

image

注意：下文只是對核心功能進(jìn)行簡單介紹祠够，具體的詳細(xì)內(nèi)容，我會在之后的文章中分別講解粪牲，每個話題一篇文章古瓤，這樣也方便以后大家的查閱，如果你比較著急想看到代碼腺阳，或者直接想自行研究落君，直接把代碼 Clone 下來研究即可，我會在下文進(jìn)行標(biāo)注每一個部分所對應(yīng)的代碼結(jié)構(gòu)位置亭引。

一绎速、項目整體介紹

在上邊的動圖里，大家也基本的看到了項目中的功能焙蚓，目前看起來還是比較簡單的纹冤，我開放出來了兩個測試賬號，超級管理員暫時先不開放购公，因為是長期開發(fā)和維護(hù)萌京，所以打算長期對這個項目進(jìn)行設(shè)計和研究，基本如下：

1宏浩、文章目錄：

• 一 || 權(quán)限后臺1.0正式上線
• 二 || 完美實現(xiàn) JWT 滑動授權(quán)刷新
• 三 || 動態(tài)路由配置 & 項目快速開發(fā)
• 四 || NetCore + SignalR 實現(xiàn)日志消息推送

2知残、功能安排：

• 管理員角色分配 ??完成
• 角色權(quán)限授權(quán) ??完成
• 根據(jù)權(quán)限，動態(tài)路由加載 ??基本完成
• 動態(tài)標(biāo)簽頁 ??基本完成
• 按鈕級別權(quán)限比庄，無該權(quán)限不顯示按鈕 ?開發(fā)中
• 用戶操作日志 ??基本完成
• 增加博客系統(tǒng)在后臺的應(yīng)用求妹，包括審核功能 ?待定 1.5
• 開發(fā)細(xì)化組件，比如動態(tài)Table ?待定 1.5
• 設(shè)計手機(jī)版 ?待定 2.0
• 部門權(quán)限佳窑，基于數(shù)據(jù)的權(quán)限分配 ?待定 2.0
• 國際化制恍，多語言 ?半成品...
• 背景切換選擇器 ?待定 2.0
• Message站內(nèi)消息推送 ?待定 2.0
• Excel、PDF等導(dǎo)入導(dǎo)出 ?待定 2.0
• 其他功能神凑，大家如果有需要的净神，我都研究研究，添加進(jìn)來。

二强挫、權(quán)限全分配

這一部分是整個后臺的核心，也是整個項目能正常運行的基石薛躬，特別是對像我這種開源的項目俯渤，是要把測試賬號和密碼開放出去的，對權(quán)限這一塊更要控制好型宝，不然會出現(xiàn)很多問題八匠，目前我是開放了兩個測試賬號，超級管理員賬號還沒有對外開放趴酣，只對群里部分人可是使用梨树，開放出來的測試賬號之一——test賬號，看到的內(nèi)容和超級管理員是一樣的岖寞，只不過我禁用了新增抡四、刪除和編輯操作，只開放了 查看 的權(quán)限仗谆，正好大家可以幫我測試一下指巡，是否真的不能修改數(shù)據(jù)，如果你能修改成功隶垮，我可以給你獎勵喲藻雪。

1、模塊分配與流程說明

這一部分涉及很多地方狸吞，目前應(yīng)該有超過六成的頁面都是這一塊配置的：

image

image

老張說：

這里有小伙伴會問勉耀，為啥要把按鈕放到右側(cè)呢，直接放到樹里多好呀蹋偏，我是這么考慮的：

1便斥、如果都放到樹里，會顯得很長很長威始，不好查看椭住；

2、如果和菜單放到一起字逗，就需要在后側(cè)加個類型京郑，說明當(dāng)前是【按鈕】還是【菜單】

而且我的項目也支持這種合并在一起的功能，不信你可以看葫掉，具體如何操作的些举，以后的文章詳細(xì)說明：

image

整體的操作很簡單：

如果新入職一個管理員，我們就先【新建一個管理用戶】俭厚，然后再看是否有合適的角色信息户魏，如果有繼續(xù)，如果沒有則【新建角色】，

接下來我們需要檢查某些頁面和接口是否已經(jīng)錄入到了后臺叼丑，如果錄入了关翎，就可以對剛剛創(chuàng)建的角色，進(jìn)行菜單權(quán)限分配鸠信，如果沒有錄入菜單目錄和接口纵寝，那我們就需要先錄入【接口信息】，然后添加【菜單信息（包括按鈕）】星立，然后繼續(xù)分配權(quán)限爽茴，很簡單的流程圖：

image

2、API接口地址

上邊所對應(yīng)的接口信息绰垂，已經(jīng)提交到Github里室奏，結(jié)構(gòu)是：

<pre style="color: rgb(0, 0, 0); font-family: "Courier New"; font-size: 12px; margin: 5px 8px; padding: 5px;">├── Controllers // 控制器
│ ├── BlogController.cs
│ ├── ClaimsController.cs
│ ├── LoginController.cs
│ ├── ModuleController.cs 　　　 　 　// API接口控制器
│ ├── PermissionController.cs 　　　　　 // 菜單接口控制器
│ ├── RoleController.cs // 角色接口控制器
│ └── UserController.cs // 管理用戶接口控制器</pre>

三、動態(tài)路由菜單

動態(tài)路由也是一個很重要而且也是必須的一個功能劲装，在上邊我們的【超級管理員或者開發(fā)人員】將權(quán)限分配完成后胧沫，我們就需要將這個管理員的賬號密碼發(fā)給新入職的員工，當(dāng)新員工登錄成功后占业，必須生成一個屬于當(dāng)前角色的左側(cè)導(dǎo)航條琳袄，大家可以自己體會下，我給大家的兩個賬號【test】和【test2】權(quán)限是不一樣的纺酸，所以對應(yīng)的菜單也是不一樣的窖逗，具體的大家可以自行體會。

這里你一定又會問餐蔬，那如果該用戶偷偷看到超級管理員的URL地址了碎紊，豈不是不安全了么，當(dāng)然不是樊诺，我的后臺項目設(shè)計權(quán)限的時候仗考，不僅僅是對菜單的控制，對API也控制了词爬，你仔細(xì)想想秃嗜，是不是每一個菜單或者按鈕都會對應(yīng)一個API地址，就算突然訪問不屬于自己的顿膨，也只能是 403 無權(quán)限锅锨。

image

1、內(nèi)容地址

這一塊的內(nèi)容主要是在 App.vue 中恋沃，大家可以放到 Layout.vue 模板里邊必搞，也可以自己定義一個組件，比如 slider.vue 等等囊咏，我當(dāng)時著急寫代碼恕洲，就全部寫到入口文件 App.vue 里了塔橡，可能在2.0版本會對其修改優(yōu)化，目前1.0版本會保留這個操作：

重點就在這個數(shù)組 routes里

<pre style="color: rgb(0, 0, 0); font-family: "Courier New"; font-size: 12px; margin: 5px 8px; padding: 5px;"> <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></pre>

四霜第、動態(tài)標(biāo)簽頁

這個功能倒不是一個核心功能葛家，是屬于一個錦上添花的小技巧，但是使用多了泌类，也是一個很有依賴性的一個工具癞谒，特別是那些經(jīng)常需要操作后臺的工作人員，如果每次都需要從左側(cè)導(dǎo)航條翻找末誓，也是很麻煩的一件事，所以就提供了這一個功能书蚪，可以很好的提高效率喇澡。

image

其實這個動態(tài)標(biāo)簽頁有兩種寫法，也各種利弊殊校，我會在以后的文章中晴玖，重點講解這兩個方法。

1为流、功能結(jié)構(gòu)地址

<pre style="color: rgb(0, 0, 0); font-family: "Courier New"; font-size: 12px; margin: 5px 8px; padding: 5px;"> <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></pre>

還有的就是利用 sessionStorage.getItem('Tags') 來對動態(tài)標(biāo)簽的記錄呕屎，詳細(xì)的內(nèi)容以后會講解。

五敬察、按鈕級別權(quán)限思考

在上邊的文章中秀睛，我們說到了動態(tài)菜單導(dǎo)航，根據(jù)不同的權(quán)限加載不同的導(dǎo)航菜單莲祸，那每個菜單中的按鈕蹂安，也應(yīng)該這么操作，如果沒有對當(dāng)前用戶賦予某些按鈕權(quán)限锐帜，就不能對這些按鈕進(jìn)行顯示田盈。

比如我對開放的兩個【測試賬號】的【添加】、【編輯】缴阎、【刪除】都禁用權(quán)限允瞧，那頁面中的按鈕就不能顯示出來，因為我想讓大家看到效果蛮拔，所以這一塊還沒有寫述暂，等下周我會把這個權(quán)限加上去，這樣沒權(quán)限的按鈕就都不會顯示了建炫。

思路：

目前采用的是獲取當(dāng)前菜單的全部接口贸典，在 .vue 頁面中，手動設(shè)置按鈕是否顯示踱卵，這里我想到了是兩個辦法廊驼；

1据过、與后端開發(fā)人員進(jìn)行商議，比如【添加==ADD】妒挎、【編輯==EDIT】等等這樣特定的字符約定绳锅。

2、因為之前分配權(quán)限的時候酝掩，對每一個菜單/按鈕鳞芙，都匹配了 API 接口地址，比如用戶頁【添加==/api/user/post】期虾，這也是一種約定原朝。

具體采用哪種方法，在以后詳細(xì)的文章中镶苞，我再深入討論喳坠。

好啦，今天這篇開篇文章就先說到這里吧茂蚓，希望對大家有所幫助壕鹉，從3月起，要開始學(xué)Id4了聋涨，這次是真的了??晾浴。

六、Github && Gitee

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

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

-- ? -- ? -- ? -- ? -- ? -- ? --