打造自己的系統權限控制

前情提要

　　最近老大分配了一個項目，開發一個給客戶用的后台系統，要求是除了用戶需要的應用功能以外還要有權限控制功能。

　　本來權限控制這種功能應該是一個后台項目的基礎功能，那么應該是可以把這個功能集成開發在原有的后台系統平台上，於是想當然的我就看了一下公司以前那個陳舊的webform后台系統，一言難盡的滋味涌上心頭，找來找去，我只找到了菜單權限配置。

　　哦！我滴個乖乖，到頭來還是得自己手擼（翻白眼）。

　　 好在我是個能認清自己位置的程序員。。。

　　

　　所以，不廢話，直接硬鋼。。。

一、vue前端的權限控制實現

　  首先要搞清楚的一個問題：what is 權限控制？

　　從權限的角度來看，服務器端提供的一切服務都是資源，例如，請求方法+請求地址（Get + http://127.0.0.1:8080/api/xxx?id=123） 就是一個資源，權限是對特定資源的訪問許可，所謂權限控制，也就是確保用戶只能訪問到被分配的資源。

　　如果往下細分的話，那么權限又分為菜單權限與按鈕權限。

　　菜單權限的意思從字面就能看出來，就是用戶能看到的被分配的導航菜單欄項。

　　按鈕權限其實指的不僅僅指的是頁面中按鈕的操作權限，還指在頁面中所有的組成元素的操作權限，例如：點擊一個按鈕刪除一條數據、點擊一個下拉框動態加載數據等，這些由頁面元素的動作帶來的資源訪問都屬於按鈕權限討論的范圍。

 

　　菜單權限怎么搞，動態路由來幫忙

　　權限控制的第一層控制就是菜單權限的控制，用戶想要進入想看的頁面，就必須要先過這一關，就像是去餐館里面吃飯，老板要先給你一份菜單才能點菜。

　　在vue項目中對菜單權限的控制實際上就是對路由的控制，利用vue-router的動態路由特性，我們可以在項目運行過程中通過代碼動態地添加路由對象，這樣就可以實現針對不同的用戶展現不同菜單的效果。

　　那么要在什么地方來加載動態路由？又以什么樣的方式來篩選路由信息呢？

　　自然而然地就會想到，我們可以在路由導航守衛中加載菜單和路由數據。大致的流程如下：

 

　　第一步，向服務器端請求用戶的擁有的菜單權限信息，獲得的數據為菜單權限信息的數組，Like This：

//從服務端請求到的菜單權限信息數組內容
[
    {
        "id": "2c9180895e13261e015e13469b7e0002",
        "name": "系統管理",
        "parent_id": "-1",
        "route": "",
        "isMenuItem": false,
        "icon": "el-icon-receiving"
    },
    {
        "id": "2c9180895e13261e015e13469b7e0003",
        "name": "賬號管理",
        "parent_id": "2c9180895e13261e015e13469b7e0002",
        "route": "sys/account",
        "isMenuItem": true,
        "icon": "el-icon-receiving"
    },
    {
        "id": "2c9180895e13261e015e13469b7e0004",
        "name": "角色管理",
        "parent_id": "2c9180895e13261e015e13469b7e0002",
        "route": "sys/role",
        "isMenuItem": true,
        "icon": "el-icon-receiving"
    },
    {
        "id": "2c9180895e13261e015e13469b7e0005",
        "name": "菜單管理",
        "parent_id": "2c9180895e13261e015e13469b7e0002",
        "route": "sys/menu",
        "isMenuItem": true,
        "icon": "el-icon-receiving"
    }
]

　　

　　第二步，在前端將以上菜單權限信息數組解析成樹形結構的數據，作為生成樹形導航菜單的數據源，就以上面的數據為例，解析轉化后的樹形結構的數據如下；

//樹形結構菜單信息數據
[
    {
        "id": "2c9180895e13261e015e13469b7e0002",
        "name": "系統管理",
        "parent_id": "-1",
        "route": "",
        "isMenuItem": false,
        "icon": "el-icon-receiving",
        "chilrden": [
            {
                "id": "2c9180895e13261e015e13469b7e0003",
                "name": "賬號管理",
                "parent_id": "2c9180895e13261e015e13469b7e0002",
                "route": "sys/account",
                "isMenuItem": true,
                "icon": "el-icon-receiving"
            },
            {
                "id": "2c9180895e13261e015e13469b7e0004",
                "name": "角色管理",
                "parent_id": "2c9180895e13261e015e13469b7e0002",
                "route": "sys/role",
                "isMenuItem": true,
                "icon": "el-icon-receiving"
            },
            {
                "id": "2c9180895e13261e015e13469b7e0005",
                "name": "菜單管理",
                "parent_id": "2c9180895e13261e015e13469b7e0002",
                "route": "sys/menu",
                "isMenuItem": true,
                "icon": "el-icon-receiving"
            }
        ]
    }
    
]

　　

　　第三步，根據以上樹形結構的菜單權限信息數據，以遞歸的方式逐條數據對應生成vue路由對象，添加到vue路由中，到這里就完成了動態路由的注冊。其中，除了登陸頁面的路由與首頁路由是以靜態的方式寫死在路由列表中，其他的路由都是使用動態加載的方式添加到路由列表中。具體核心代碼如下；

/**
* 添加動態(菜單)路由
* @param {*} menuList 菜單列表
* @param {*} routes 遞歸創建的動態(菜單)路由
*/
function addDynamicRoutes (menuList = [], routes = []) {
  var temp = []
  for (var i = 0; i < menuList.length; i++) {
    if (menuList[i].children && menuList[i].children.length >= 1) {
      temp = temp.concat(menuList[i].children)
    } else if (menuList[i].route && /\S/.test(menuList[i].route)) {
       menuList[i].route = menuList[i].route.replace(/^\//, '')
       // 創建路由配置
       var route = {
         path: menuList[i].route,
         component: null,
         name: menuList[i].name
       }
       let path = getIFramePath(menuList[i].route)
       if (path) {
         // 如果是嵌套頁面, 通過iframe展示
         route['path'] = path
         route['component'] = IFrame
         // 存儲嵌套頁面路由路徑和訪問URL,以便IFrame組件根據path檢索url進行頁面的展示
         let url = getIFrameUrl(menuList[i].route)
         let iFrameUrl = {'path':path, 'url':url}
         store.commit('addIFrameUrl', iFrameUrl)
       } else {
        try {
          // 根據菜單URL動態加載vue組件，這里要求vue組件須按照url路徑存儲
          // 如url="sys/user"，則組件路徑應是"@/views/sys/user.vue",否則組件加載不到
          let url = helper.urlToHump(menuList[i].route)
          route['component'] = resolve => require([`@/views/${url}`], resolve)
        
        } catch (e) {}
      }
      routes.push(route)
    }
  }
  if (temp.length >= 1) {
    addDynamicRoutes(temp, routes)
  } else {
    console.log('動態路由加載...')
    console.log(routes)
    console.log('動態路由加載完成.')
  }
  return routes
}

　　在生成導航菜單的時候借助Elment-UI的組件，封裝一個可以遞歸的導航菜單組件，用來展示樹形的導航菜單效果，樹形組件的代碼也在這里貼出供參考：

<template>
  <el-submenu v-if="menu.children && menu.children.length >= 1" :index="'' + menu.id">
    <template slot="title">
      <i :class="menu.icon" ></i>
      <span slot="title">{{menu.name}}</span>
    </template>
    <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
  </el-submenu>
  <el-menu-item v-else :index="'' + menu.id" @click="handleRoute(menu)">
    <i :class="menu.icon"></i>
    <span slot="title">{{menu.name}}</span>
  </el-menu-item>
</template>

<script>
import { getIFrameUrl, getIFramePath } from '@/utils/iframe'
export default {
  name: 'MenuTree',
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleRoute (menu) {
      // 如果是嵌套頁面，轉換成iframe的path
      let path = getIFramePath(menu.route)
      if(!path) {
        path = menu.route
      }
      // 通過菜單URL跳轉至指定路由
      this.$router.push("/" + path)
    }
  }
}
</script>

　　在這里貼出最終的實現效果圖：

　　

 

 

　　按鈕權限控制

　　 前面我們實現了菜單權限的控制，接着就來實現一下按鈕權限控制。

　　討論一個具體的場景：阿J和阿Q兩個人同時都有xxx頁面的訪問權限，現在規定頁面中的列表數據的刪除操作，阿J可以執行，但是阿Q不能執行。

　　那么要如何去滿足以上這個權限控制的場景呢，在這里需要實現的就是按鈕權限控制。

　　按鈕權限的控制在視圖層是如何體現的？這時你的腦子里可能就是這樣一幅畫面，阿J所看到的界面上有刪除按鈕，阿Q的界面上沒有刪除按鈕。對，最終呈現出來的效果就是如此。

　　問題來到了：我該如何用代碼來實現？

　　我們先來理清一下思路，首先，對於用戶來說，每一個請求的api就是一個資源，前面有說到一個api資源的表現形式是這樣的：請求方式+請求地址（例：GET，http://192.168.1.101/api/xxxxx），那么一個用戶所擁有的api權限集合可以這樣表示：

　　let permissions = {
  　　"get,/resources":true,
  　　"delete,/resources":true,
  　　"post,/resources":true,
  　　"put,/resources":true,
  　　...
　　}

 

　　 那api權限與按鈕權限之間又是什么關系呢？答案是：一個按鈕事件觸發以后可能會執行一個或者多個api資源請求，當然，也可能一個api請求也不會執行。對於這種按鈕與api權限之間不確定的對應關系，其實也很好解決，就像下面這段代碼：

  　let has = function(permission){
       if(!permissions[permission]){
         return false;
       }
       return true;
    }   

    Vue.directive('has', {
   　 bind: function (el, binding) {
     　 if(!has(binding.value)){
       　　  el.parentNode.removeChild(el);
     　 }
    　}
  　});
  
  　//用法：
 　 <btn v-has='get,/sources'>按鈕</btn>
 
 　 //或者
 　 <div v-if="has('get,/sources') && something">
    　 一個需要同時具備'get,/sources'權限和somthing為真值才顯示的div
 　 </div>

 

　　 這段代碼借助了vue的自定義指令實現了指令v-has，可以用這個指令來綁定按鈕與api權限之間一對一的關系，如果想一個按鈕綁定多個api權限，那么可以使用v-if的用法，調用has函數，如上代碼所示。

　　代碼是寫出來了，思路也很清晰，但是，問題還是有的。一個系統中少說也有十幾個頁面，這些頁面中與api權限有關聯的按鈕加起來保守的說也有幾十上百個吧，那么這百十個按鈕都要像這樣讓程序員人工綁定嗎？而且隨着系統慢慢的壯大與改變，按鈕會越來越多，而且可能還會修改以前的按鈕api權限，這就造成了程序員的脫發問題。

　　於是，不想謝頂的哥們就跳出來說，要不我們不要這么綁定來綁定去了，直接在api權限的層面來控制api資源的請求，直接寫一個請求過濾器就行了，這樣的話，沒有api權限的用戶就算點了按鈕也不會發送請求，不是達到了按鈕權限控制的效果了嗎。然后，把代碼也貼出來了：

　　axios.interceptors.request.use(function (config) {
  　　let permission = config.method + config.url.replace(config.baseURL,',');
 　　 if(!has(permission)){
 　　 //驗證不通過
 　　   return Promise.reject({
  　　    message: `no permission`
  　　  });
  　　}
 　　 return config;
　　});

　　但如果僅僅這樣做權限控制，界面上將顯示出所有的按鈕，用戶看到的按鈕卻不一定可以點擊，這種體驗我認為只能停留在理論層面，根本無法應用到實際產品中。請求控制可以作為整個控制體系的第二道防線，或某些特殊情況下的輔助手段，最終還是要回到按鈕控制的思路上來。

　　於是，我給出一個稍微能減輕程序員負擔的方案：讓按鈕和請求聯系起來，比如說按鈕涉及一個名稱為A的請求，那么我希望權限指令可以這樣寫。

 1　　 <btn v-has="[A]" @click="Fn">按鈕</btn>

　　在這里，A是一個包含兩個屬性的對象：

　　const A = {
 　　 p: ['put,/menu/**'],
  　　r: params => {
  　　  return axios.put(`/menu/${params.id}`, params)
  　　}
　　};

　　//用作權限：
　　<btn v-has="[A]" @click="Fn">按鈕</btn>

　　//用作請求：
　　function Fn(){
  　　  A.r().then((res) => {})
　　}

　　我們把api請求資源與要調用的請求方法綁定到了一個對象中，通常我們會將項目里所有的api放在一個api模塊里集中管理，在寫api時順便就把權限給維護了，換來的是在組件界面里可以直接用請求名稱來描述權限，這樣的話我們在使用v-has指令綁定api請求資源的時候就不用頻繁地在界面和api模塊之間來回奔波了，一定程度上實現了關注點分離，減輕了程序員的負擔，讓頭發多一點，視力好一點。

　　當然，相應地就要稍微改動一下has方法：接收請求名稱的數組參數，允許多個權限聯合校驗，因為在很多情況下一個按鈕觸發發送的請求不止一個，允許多個權限綁定到按鈕可以盡可能地降低按鈕權限的維護成本，像這樣使用：

　　<btn v-has="[A，B，C]" @click="Fn">按鈕</btn>

　　同時貼出權限驗證的hasApiPerms函數代碼供參考：

 

function hasApiPerms (apiPermArray) {

  let hasApiPerms = JSON.parse(sessionStorage.getItem('setApiPerms'))
  let RequiredPermissions = []
  let permission = true
  
  if (Array.isArray(apiPermArray)) {
    apiPermArray.forEach(e => {
      if(e && e.p){
        RequiredPermissions = RequiredPermissions.concat(e.p.map(hashUrl => helper.urlToHump(hashUrl.replace(/\s*/g,""))))
      }
    });
  } else {
    if(apiPermArray && apiPermArray.p){
      RequiredPermissions = apiPermArray.p.map(hashUrl => helper.urlToHump(hashUrl.replace(/\s*/g,"")))
    }
    
  }

  for(let i=0;i<RequiredPermissions.length;i++){
    let p = helper.urlToHump(RequiredPermissions[i].replace(/\s*/g,""))
    if (!hasApiPerms[p]) {

      console.log('apiPerms')
      console.log(hasApiPerms)
      permission = false
      break
    }
  }
  
  return permission
}

　　

二、后端權限控制實現：

　　1、表設計

　　表設計采用的是RBAC（Role-Base Access Control）模型，主要是圍繞 用戶-角色-權限 三個表的關系來進行表的設計，其中權限表包括了Api權限與菜單權限的數據。

　　

　　2、關鍵代碼實現

　　在 .net mvc 項目中，api權限校驗的操作一般都會放在 IAuthorizationFilter 過濾器中實現，利用AOP原理，在每一個Action執行前進行Api權限校驗。

　　1）根據這個思路，首先定義一個Attribute用來標記Action的權限信息：

    [AttributeUsage(AttributeTargets.Method, AllowMultiple = false)]
    public class ApiPermAttribute : Attribute
    {
        public string ApiUrl { get; set; }

        public ApiPermAttribute(string apiUrl)
        {
            this.ApiUrl = apiUrl;
        }
    }

　　2）在需要進行api權限驗證的action上標記：

    [ApiPerm("Api/Account/GetItemsPaged")]
    [HttpGet]
    public ActionResult getItemsPaged(int? pageNum, int? pageSize, string name, string account)
    {
        var items = AccountService.SearchItemsPaged(pageNum, pageSize, name, account).ToList();

        return JsonView(items);
    }

　　3）進行權限驗證的過濾器:

    /// <summary>
    /// Api訪問權限檢查
    /// </summary>
    /// <param name="filterContext"></param>
    public void OnAuthorization(AuthorizationContext filterContext)
    {
        var apiPermAttrObjs = filterContext.ActionDescriptor.GetCustomAttributes(typeof(ApiPermAttribute), false);
        if (null == apiPermAttrObjs || apiPermAttrObjs.Length <= 0) return;

        //check login state
        var loginState = filterContext.HttpContext.Session["LoginState"];

        if (null == loginState || !(bool)loginState)
        {
            filterContext.Result = new JsonNetResult { Data = new AjaxResult { Status = "error", ErrorMsg = "redirect to login" } };
            return;
        }

        //check api permission
        var apiPermAttr = apiPermAttrObjs[0] as ApiPermAttribute;
        string loginAccountId = filterContext.HttpContext.Session["LoginUserId"].ToString();

        if (!accountService.JudgeIfAccountHasPerms(loginAccountId, apiPermAttr.ApiUrl))
        {
            filterContext.Result = new JsonNetResult { Data = new AjaxResult { Status = "error", ErrorMsg = "you have no permission of current operation" } };
            return;
        }
    }

 

　　菜單權限校驗是在vue前端進行的，后端只需要提供給前端當前登陸用戶的所擁有的的菜單權限數組即可，不用做其他的處理。

　　由於菜單表的設計是樹結構，這里就有一個難點就是如何根據菜單項查詢出祖宗結點的所有目錄項，在這里貼出oracle數據庫中查詢菜單樹的sql，屬於比較少用的遞歸查詢:

    select 
        distinct D.* 
    from 
        B_MENU D 
    start with D.ID in (
        select 
            A.MENUID 
        from 
            B_PERMISSION A,
            R_ADMIN_USER_ROLE B,
            R_ROLE_PERMISSION C 
        where 
            A.PERMISSIONTYPE = 2 and 
            A.ID = C.PERMISSIONID and 
            B.ROLEID = C.ROLEID and 
            B.ADMINUSERID = {0} and 
            A.DELFLAG = 0 and B.DELFLAG = 0 and C.DELFLAG = 0
    ) connect by prior D.PARENTID = D.ID

　　以上只是大致地理出了在設計權限控制系統是時的基本思路與部分關鍵代碼實現，更詳細的細節還是需要看源碼才行，在這里貼出源碼地址，也歡迎交流~~~

 　　gitee源碼地址：

　  （覺得不錯的話別忘了點星哦）

 　　vue前端代碼：https://gitee.com/xiaosen123/minisen-admin-ui.git

　　　　　　　　   https://github.com/minisen/minisen-admin-ui.git

　　  .net core后端代碼：https://gitee.com/xiaosen123/minisen-admin-backend.git

 

　　參考博文地址：

　　1、vue+element ui 實現權限管理系統

　　2、Vue2.0用戶權限控制解決方案

　　非常感謝大佬們寫的博文指引方向！

 

 

手機：[phone] | QQ：2822737354 | 郵箱：[e-mail]

個人博客網站：minisen.top

現居地：深圳市龍華區

歡迎朋友們一起交流，在附近的朋友們可聊可約飯~