ABP項目接口權限控制

 

1. 后台增加權限配置

 

 

 

  在 ABPProject.Application.Contracts 項目中 

 增加 權限組名稱：ABPCatd

 路徑：Permissions /  ABPProjectPermissions.cs

namespace ABPProject.Permissions
{
    public static class ABPProjectPermissions
    {
        public const string GroupName = "ABPProject";
        public const string GroupNameC = "ABPCatd";

        //Add your own permission names. Example:
        //public const string MyPermission1 = GroupName + ".MyPermission1";
    }
}

 

增加權限配置

路徑： Permissions  / ABPProjectPermissionDefinitionProvider.cs

        public override void Define(IPermissionDefinitionContext context)
        {
            var myGroup = context.AddGroup(ABPProjectPermissions.GroupName);
            //Define your own permissions here. Example:
            //myGroup.AddPermission(ABPProjectPermissions.MyPermission1, L("Permission:MyPermission1"));

            var myGroupC = context.AddGroup(ABPProjectPermissions.GroupNameC);
 myGroupC.AddPermission("category_Create", L("Permission:category_Create"));
        }

 

 

啟動項目后，訪問 接口

https://localhost:44325/api/permission-management/permissions?providerName=R

providerName: R-角色權限，U-用戶權限

可查詢到 權限相關信息

 

 

 

上面接口返回的結果數據，可用做前端頁面配置數據源。

 

2. 路由配置

前端 vue 項目中 修改路由配置，給路由增加權限配置

此處只是寫法舉例：權限名稱與后端定義的名稱對應

const tableRouter = {
  path: '/table',
  component: Layout,
  redirect: '/table/complex-table',
  name: 'Table',
  meta: {
    title: 'Table',
    icon: 'table'
  },
 permission:'AbpIdentity.Roles',
  children: [{
      path: 'dynamic-table',
      component: () => import('@/views/table/dynamic-table/index'),
      name: 'DynamicTable',
      meta: {
        title: 'dynamicTable'
      },
 permission: 'category_Create', 
　　　} 
　　] 
} 
export default tableRouter

 

 

3. 菜單配置

前端 VUE 項目中 permission.js 里面 執行路由跳轉時，會判斷有權限的菜單 

 

 

 

先調用接口，獲取到用戶擁有的權限 

https://localhost:44325/api/abp/application-configuration

 獲取到 auth.grantedPolicies

 

 

 

傳入 generateRoutes 接口中用於權限比限，拿到用戶所擁有的菜單

修改 generateRoutes 中的比較方法 : filterAsyncRoutes

路徑 src / store / modules / permission.js 

此處省略

 

4. 頁面內容的權限判斷，比如按鈕、模塊， 用v-if / v-show