基于业务的需求，每一个页面会有不同的功能，对不同的功能又需要进行权限管控，那基于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的重复，可以考虑使用类名作为前缀。

转载请注明出处。