從壹開始先後端 [vue後臺] 之一 || 權限後臺系統 1.0 正式上線

時間 2019-11-05

標籤開始後端 vue 後臺之一權限系統 1.0 正式上線简体版

原文原文鏈接

緣起

哈嘍各位小夥伴週三好，春節已通過去好多天了，羣裏小夥伴也各類催搞了，新年也接了新項目，比較忙，不過仍是終於遇上這個二月的尾巴寫了這篇文章，也把 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的版本是：html

一、靈活的在數據庫權限配置（核心）前端

二、動態路由+動態標籤（重要）vue

三、博客+Tibug項目的數據管理git

四、按鈕級別的權限設計（進行中...）github

五、其餘設計，見下文（2.0版本設計中）數據庫

並且，重要的是，我也會一直進行維護，畢竟這個項目是配合一下幾個項目一塊兒使用的，因此會長期使用，不會像其餘的開源做品同樣，僅僅是一個Demo：json

我的博客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

本文先主要是開篇，由於其實不少內容，我們在《先後端分離系列中》，已經說的不少了，因此我能只會說一些重點的地方（好比權限分配、動態路由等），再也不從項目的搭建開始講解了，不過要是有小夥伴問的多的話，我也能夠多寫一些文章，因此關鍵仍是互動咯。後端

廢話很少說，先看下總體效果，若是對您有幫助，能夠繼續往下看 👍：api

注意：下文只是對核心功能進行簡單介紹，具體的詳細內容，我會在以後的文章中分別講解，每一個話題一篇文章，這樣也方便之後你們的查閱，若是你比較着急想看到代碼，或者直接想自行研究，直接把代碼 Clone 下來研究便可，我會在下文進行標註每個部分所對應的代碼結構位置。數組

1、項目總體介紹

在上邊的動圖裏，你們也基本的看到了項目中的功能，目前看起來仍是比較簡單的，我開放出來了兩個測試帳號，超級管理員暫時先不開放，由於是長期開發和維護，因此打算長期對這個項目進行設計和研究，基本以下：

一、文章目錄：

二、功能安排：

管理員角色分配 👉完成
角色權限受權 👉完成
根據權限，動態路由加載 👉基本完成
動態標籤頁 👉基本完成
按鈕級別權限，無該權限不顯示按鈕 ✨開發中
用戶操做日誌 👉基本完成
增長博客系統在後臺的應用，包括審覈功能 ✨待定 1.5
開發細化組件，好比動態Table ✨待定 1.5
設計手機版 ✨待定 2.0 半成品，兼容手機...
部門權限，基於數據的權限分配 ✨待定 2.0
國際化，多語言 ✨半成品...
背景切換選擇器 ✨待定 2.0
Message站內消息推送 ✨待定 2.0
Excel、PDF等導入導出 ✨待定 2.0
其餘功能，你們若是有須要的，我都研究研究，添加進來。

2、權限全分配

這一部分是整個後臺的核心，也是整個項目能正常運行的基石，特別是對像我這種開源的項目，是要把測試帳號和密碼開放出去的，對權限這一塊更要控制好，否則會出現不少問題，目前我是開放了兩個測試帳號，超級管理員帳號尚未對外開放，只對羣裏部分人但是使用，開放出來的測試帳號之一——test帳號，看到的內容和超級管理員是同樣的，只不過我禁用了新增、刪除和編輯操做，只開放了查看的權限，正好你們能夠幫我測試一下，是否真的不能修改數據，若是你能修改爲功，我能夠給你獎勵喲。

一、模塊分配與流程說明

這一部分涉及不少地方，目前應該有超過六成的頁面都是這一塊配置的：

老張說：

這裏有小夥伴會問，爲啥要把按鈕放到右側呢，直接放到樹裏多好呀，我是這麼考慮的：

一、若是都放到樹裏，會顯得很長很長，很差查看；

二、若是和菜單放到一塊兒，就須要在後側加個類型，說明當前是【按鈕】仍是【菜單】

並且個人項目也支持這種合併在一塊兒的功能，不信你能夠看，具體如何操做的，之後的文章詳細說明：

總體的操做很簡單：

若是新入職一個管理員，咱們就先【新建一個管理用戶】，而後再看是否有合適的角色信息，若是有繼續，若是沒有則【新建角色】，

接下來咱們須要檢查某些頁面和接口是否已經錄入到了後臺，若是錄入了，就能夠對剛剛建立的角色，進行菜單權限分配，若是沒有錄入菜單目錄和接口，那咱們就須要先錄入【接口信息】，而後添加【菜單信息（包括按鈕）】，而後繼續分配權限，很簡單的流程圖：

二、API接口地址

上邊所對應的接口信息，已經提交到Github裏，結構是：

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

3、動態路由菜單

動態路由也是一個很重要並且也是必須的一個功能，在上邊咱們的【超級管理員或者開發人員】將權限分配完成後，咱們就須要將這個管理員的帳號密碼發給新入職的員工，當新員工登陸成功後，必須生成一個屬於當前角色的左側導航條，你們能夠本身體會下，我給你們的兩個帳號【test】和【test2】權限是不同的，因此對應的菜單也是不同的，具體的你們能夠自行體會。

這裏你必定又會問，那若是該用戶偷偷看到超級管理員的URL地址了，豈不是不安全了麼，固然不是，個人後臺項目設計權限的時候，不只僅是對菜單的控制，對API也控制了，你仔細想一想，是否是每個菜單或者按鈕都會對應一個API地址，就算忽然訪問不屬於本身的，也只能是 403 無權限。

一、內容地址

這一塊的內容主要是在 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>

4、動態標籤頁

這個功能倒不是一個核心功能，是屬於一個錦上添花的小技巧，可是使用多了，也是一個頗有依賴性的一個工具，特別是那些常常須要操做後臺的工做人員，若是每次都須要從左側導航條翻找，也是很麻煩的一件事，因此就提供了這一個功能，能夠很好的提升效率。

其實這個動態標籤頁有兩種寫法，也各類利弊，我會在之後的文章中，重點講解這兩個方法。

一、功能結構地址

     <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>