Asp.net+Vue+EmelentUI的實現(七)權限控制

基於業務的需求，每一個頁面會有不同的功能，對不同的功能又需要進行權限管控，那基於Asp.net和Vue要如何實現權限管控呢？比如有增加、刪除、修改的功能，需要控制對應的權限，如果這些功能的按鈕在沒有權限時不渲染出來，那就達到了目的。所以解決權限控制的關鍵，在前端就是控制是否渲染。基於這樣的思考，於是有了這樣的思路：

使用vue的v-if來控制渲染，v-if的值由asp.net的後臺代碼來給定，示例如下：

 <el-button size="mini" 
                               type="primary"
                               v-if="<%=Product_Powers_Delete%>"
                               @click="handleDelete(scope.$index, scope.row)">刪除</el-button>

其中Product_Powers_Delete是後臺代碼類的屬性，代碼如下：

   /// <summary>
        /// 權限-刪除
        /// </summary>
        [PowerCheck]
        public int Product_Powers_Delete { get; set; } = PowerNo;
        #endregion

        protected void Page_Load(object sender, EventArgs e)
        {

        }

其中PowerCheck是自定義的權限標識屬性，用於反射計算權限屬性時的識別，代碼如下

/// <summary>
    /// 權限校驗屬性的標識
    /// </summary>
    public class PowerCheckAttribute : Attribute
    {

    }

那如何對Product_Powers_Delete進行賦值呢？如果一個一個的手動來對應權限的key去賦值，也是可行的，但這樣太繁瑣，而且很容易出錯，所以爲了讓這個過程變的自動，就考慮使用反射屬性名，然後與計算出來的權限列表進行對應。爲了便於各個aps.net後臺代碼類的使用，我們將這些類都繼承自PageBase(可以參看《Asp.net+Vue+EmelentUI的實現(三)JS和CSS的自動載入》)，然後在PageBase中來統一實現對應，具體代碼如下

 /// <summary>
        /// 擁有權限
        /// </summary>
        protected const int PowerHave = 1;
        /// <summary>
        /// 沒有權限
        /// </summary>
        protected const int PowerNo = 0;

#region initPower
        private void initPower()
        {
            List<PowerItem> powers = null;

            var menuKey = this.Request.QueryString["MenuKey"];
            if (!string.IsNullOrWhiteSpace(menuKey))
            {
                powers = PowerHelper.QueryPowers(menuKey);
            }

            if (powers == null)
            {
                powers = new List<PowerItem>();
            }

            Type type = this.GetType();
            var properyties = type.GetProperties(BindingFlags.Public| BindingFlags.Instance);
            if (properyties != null && properyties.Length > 0)
            {
                foreach (var prop in properyties)
                {
                    var attr=prop.GetCustomAttribute<PowerCheckAttribute>();
                    if (attr==null)
                    {
                        continue;
                    }
                    var haveInt = powers.Exists(t => prop.Name.Equals(t.CodeUniqueFlag)) ? PowerHave : PowerNo;
                    prop.SetValue(this, haveInt, null);
                }
            }
        }

        /// <summary>
        /// 獲取菜單的整型值，使用整形值是爲了便於權限的配置與vue的渲染。
        /// </summary>
        /// <param name="powerItems">權限項列表</param>
        /// <param name="powerItemKey">權限項的key</param>
        /// <returns></returns>
        private int GetPowerInt(List<BMPowerItem> powerItems, string powerItemKey)
        {
            if (ListHelper.IsEmpty(powerItems))
            {
                return 0;
            }

            return powerItems.Exists(t => t.Key.Equals(powerItemKey)) ? PowerHave : PowerNo;
        }
        #endregion

其中PowerHelper.QueryPowers是計算當前用戶的當前菜單下有哪些權限，具體實現需要依據自身的需求來計算。CodeUniqueFlag是自行配置的，必須要與代碼中的屬性項保持一致，比如CodeUniqueFlag爲Product_Powers_Delete。

爲了防止CodeUniqueFlag的重複，可以考慮使用類名作爲前綴。

轉載請註明出處。