d2 admin pm تنزيل - d2 admin pm تنزيل كود المصدر

الكود قبيح جدًا، لذا لا يُنصح بنسخه، يمكنك إلقاء نظرة على فكرة تنفيذ RBAC، وهي فكرة عالمية.

تشغيل باستخدام

git clone https://github.com/wjkang/d2-admin-pm.git

npm install

npm start

يتطلب دعمًا من الخدمة الوهمية الخلفية

git clone https://github.com/wjkang/d2-admin-server.git

npm install

npm start

معاينة الميزة

تعديلات على d2-admin-start-kit

يتم نقل المحتوى created في main.js إلى router/index.js ، ويتم إضافة المنطق ذي الصلة.

تم تعديل البرنامج المساعد للكود المرتبط بـ axios plugin/axios/index.js لدعم التحكم في الأذونات على مستوى الواجهة ودعم تكوين تأثيرات التحميل.

أضف وحدة القائمة إلى متجر vuex وأضف fullAside ، المسار الكامل هو store.state.d2admin.menu.fullAside

أضف وحدة الأذونات إلى متجر vuex لتخزين رمز إذن وظيفة المستخدم ورمز الدور والواجهة مع أذونات الوصول وما إذا كان معرف المسؤول

 export default {
    namespaced : true ,
    state : {
        //功能编码
        functions : [ ] ,
        //角色编码
        roles : [ ] ,
        //接口
        interfaces : {
            GET : [ ] ,
            POST : [ ] ,
            PUT : [ ] ,
            DELETE : [ ]
        } ,
        //是否管理员
        isAdmin : false
    } ,
    mutations : {
        set ( state , data ) {
            state . functions = data . functions ;
            state . roles = data . roles ;
            state . isAdmin = data . isAdmin ;
            state . interfaces = data . interfaces ;
        }
    }
}

هذا الجزء من إجراء load لوحدة account في متجر vuex:

 // DB -> store 持久化数据加载上次退出时的多页列表
await dispatch ( 'd2admin/page/openedLoad' , null , { root : true } )

انتقل إلى router/index.js ، يجب تنفيذه بعد تحميل مسار الإذن.

المفاهيم ذات الصلة

نموذج إذن

تم تنفيذ التحكم في إذن نموذج RBAC
تتم إدارة القائمة والتوجيه بشكل مستقل ويتم إرجاعهما بالكامل بواسطة الواجهة الخلفية
المستخدم يخزن المستخدم
يحدد المشرف ما إذا كان المستخدم مسؤول النظام
دور يخزن معلومات الدور
يقوم roleUser بتخزين العلاقة بين المستخدمين والأدوار
تخزن القائمة معلومات القائمة وتنقسم الأنواع إلى菜单功能. يمكن أن يكون هناك وظائف متعددة ضمن القائمة. يحدد حقل permission permission بنوع菜单أذونات功能المطلوبة للوصول إلى هذه القائمة الاسم المستعار لهذه الوظيفة، وبالتالي فإن نوع菜单حقل permission هو قيمة permission للعقدة الفرعية من النوع功能.
إذن يخزن العلاقة بين الأدوار والوظائف
تقوم الواجهة بتخزين معلومات الواجهة
تقوم functionInterface بتخزين العلاقة بين الوظائف والواجهات من خلال البحث عن الدور الذي ينتمي إليه المستخدم، ثم البحث عن الأذونات الوظيفية للأدوار ذات الصلة، ثم استخدام الوظائف ذات الصلة لمعرفة الواجهات التي يمكن للمستخدم الوصول إليها.
يخزن المسار معلومات التوجيه الأمامية ويقوم بتصفية المسارات التي يمكن للمستخدمين الوصول إليها من خلال حقل permission .

عملية التشغيل وواجهات برمجة التطبيقات ذات الصلة

باستخدام منطق تسجيل الدخول الأصلي لـ d2admin ، يحدد حارس التوجيه العام ما إذا كان قد تم سحب معلومات الإذن أم لا، ويضع علامة عليها على أنها تم الحصول عليها بعد الحصول عليها.

تتضمن معلومات الأذونات التي تحتاج الواجهة الخلفية إلى إرجاعها مجموعة رموز الدور بعد تصفية الأذونات، ومجموعة رموز الوظيفة، ومجموعة معلومات الواجهة، وقائمة القائمة، وقائمة التوجيه، وما إذا كان تم تحديد مسؤول النظام. التنسيق على النحو التالي

 {
  "statusCode" : 200 ,
  "msg" : "" ,
  "data" : {
    "userName" : "MenuManager" ,
    "userRoles" : [
      "R_MENUADMIN"
    ] ,
    "userPermissions" : [
      "p_menu_view" ,
      "p_menu_edit" ,
      "p_menu_menu"
    ] ,
    "accessMenus" : [
      {
        "title" : "系统" ,
        "path" : "/system" ,
        "icon" : "cogs" ,
        "children" : [
          {
            "title" : "系统设置" ,
            "icon" : "cogs" ,
            "children" : [
              {
                "title" : "菜单管理" ,
                "path" : "/system/menu" ,
                "icon" : "th-list"
              }
            ]
          } ,
          {
            "title" : "组织架构" ,
            "icon" : "pie-chart" ,
            "children" : [
              {
                "title" : "部门管理" ,
                "icon" : "html5"
              } ,
              {
                "title" : "职位管理" ,
                "icon" : "opencart"
              }
            ]
          }
        ]
      }
    ] ,
    "accessRoutes" : [
      {
        "name" : "System" ,
        "path" : "/system" ,
        "component" : "layoutHeaderAside" ,
        "componentPath" : "layout/header-aside/layout" ,
        "meta" : {
          "title" : "系统设置" ,
          "cache" : true
        } ,
        "children" : [
          {
            "name" : "MenuPage" ,
            "path" : "/system/menu" ,
            "component" : "menu" ,
            "componentPath" : "pages/sys/menu/index" ,
            "meta" : {
              "title" : "菜单管理" ,
              "cache" : true
            }
          } ,
          {
            "name" : "RoutePage" ,
            "path" : "/system/route" ,
            "component" : "route" ,
            "componentPath" : "pages/sys/route/index" ,
            "meta" : {
              "title" : "路由管理" ,
              "cache" : true
            }
          } ,
          {
            "name" : "RolePage" ,
            "path" : "/system/role" ,
            "component" : "role" ,
            "componentPath" : "pages/sys/role/index" ,
            "meta" : {
              "title" : "角色管理" ,
              "cache" : true
            }
          } ,
          {
            "name" : "UserPage" ,
            "path" : "/system/user" ,
            "component" : "user" ,
            "componentPath" : "pages/sys/user/index" ,
            "meta" : {
              "title" : "用户管理" ,
              "cache" : true
            }
          } ,
          {
            "name" : "InterfacePage" ,
            "path" : "/system/interface" ,
            "component" : "interface" ,
            "meta" : {
              "title" : "接口管理"
            }
          }
        ]
      }
    ] ,
    "accessInterfaces" : [
      {
        "path" : "/menu/:id" ,
        "method" : "get"
      } ,
      {
        "path" : "/menu" ,
        "method" : "get"
      } ,
      {
        "path" : "/menu/save" ,
        "method" : "post"
      } ,
      {
        "path" : "/interface/paged" ,
        "method" : "get"
      }
    ] ,
    "isAdmin" : 0 ,
    "avatarUrl" : "https://api.adorable.io/avatars/85/[email protected]"
  }
}

قائمة الإعدادات

دمج القائمة الثابتة ( /menu/header ، /menu/aside ) مع قائمة الأذونات ( accessMenus ) التي يتم إرجاعها بواسطة الواجهة الخلفية، وتخزينها في وحدة متجر vuex المقابلة

...
let allMenuAside = [ ... menuAside , ... permissionMenu ]
let allMenuHeader = [ ... menuHeader , ... permissionMenu ]
. . .
// 设置顶栏菜单
store . commit ( 'd2admin/menu/headerSet' , allMenuHeader )
// 设置侧边栏菜单
store . commit ( 'd2admin/menu/fullAsideSet' , allMenuAside )
// 初始化菜单搜索功能
store . commit ( 'd2admin/search/init' , allMenuHeader )

التعامل مع التوجيه

افتراضيًا، يتم استخدام routerMapComponents لمعالجة مسارات الأذونات التي يتم إرجاعها بواسطة الواجهة الخلفية.

 //处理动态添加的路由
const formatRoutes = function ( routes ) {
    routes . forEach ( route => {
        route . component = routerMapComponents [ route . component ]
        if ( route . children ) {
        formatRoutes ( route . children )
        }
    } )
}
. . .
formatRoutes ( permissionRouter )
//动态添加路由
router . addRoutes ( permissionRouter ) ;
// 处理路由 得到每一级的路由设置
store . commit ( 'd2admin/page/init' , [ ... frameInRoutes , ... permissionRouter ] )

للتعرف على طرق معالجة التوجيه والاختلافات بينها، يرجى مراجعة المقالات ذات الصلة لاحقًا.

تعيين معلومات الإذن

قم بتخزين مجموعة ترميز الأدوار ومجموعة ترميز الوظائف ومجموعة معلومات الواجهة وما إذا كان معرف مسؤول النظام مخزنًا في وحدة متجر vuex المقابلة

...
permission . functions = userPermissionInfo . userPermissions
permission . roles = userPermissionInfo . userRoles
permission . interfaces = util . formatInterfaces ( userPermissionInfo . accessInterfaces )
permission . isAdmin = userPermissionInfo . isAdmin == 1
. . .
// 设置权限信息
store . commit ( 'd2admin/permission/set' , permission )

التحكم في إذن الواجهة وتكوين التحميل

يدعم التحكم باستخدام ترميز الأدوار، وترميز الوظائف، وأذونات الواجهة، على النحو التالي

 export function getMenuList ( ) {
    return request ( {
        url : '/menu' ,
        method : 'get' ,
        interfaceCheck : true ,
        permission : [ "p_menu_view" ] ,
        loading : {
            type : 'loading' ,
            options : {
                fullscreen : true ,
                lock : true ,
                text : '加载中...' ,
                spinner : 'el-icon-loading' ,
                background : 'rgba(0, 0, 0, 0.8)'
            }
        } ,
        success : {
            type : 'message' ,
            options : {
                message : '加载菜单成功' ,
                type : 'success'
            }
        }
    } )
}

interfaceCheck: true يعني استخدام أذونات الواجهة للتحكم، إذا كانت معلومات الواجهة المخزنة في متجر vuex تتطابق مع الواجهة المطلوبة حاليًا، فيمكن بدء الطلب، وإلا فسيتم اعتراض الطلب.

permission:["p_menu_view"] يعني استخدام ترميز الدور وترميز الوظيفة للتحقق من الإذن، إذا كان ترميز الدور أو ترميز الوظيفة المخزن في متجر vuex يتطابق مع الترميز الممثل حاليًا، فيمكن بدء الطلب، وإلا فسيتم اعتراض الطلب.

الكود المصدري موجود في libs/permission.js ويمكن تعديله وفقًا لاحتياجاتك الخاصة.

الكود المصدري المتعلق بتكوين loading موجود في libs/loading.js libs/loading.js success تكوينه وفقًا لاحتياجاتك الخاصة. باتباع هذه الفكرة، يمكنك تكوين وظائف أخرى بنفسك، مثل فشل الطلب، وما إلى ذلك.

التحكم في إذن عنصر الصفحة

استخدم التوجيه v-permission :

 < el-button
    v-permission:function.all =" ['p_menu_edit'] "
    type =" primary "
    icon =" el-icon-edit "
    size =" mini "
    @click =" batchEdit "
    >批量编辑</ el-button >

يمكن أن تكون المعلمة function أو role ، مما يشير إلى أنه يتم استخدام تشفير الوظيفة أو تشفير الدور للتحقق.

يعني المعدل all أنه يجب مطابقة جميع الرموز الموجودة في قيمة التعليمات.

الكود المصدري موجود في plugin/permission/index.js ويمكن تعديله وفقًا لاحتياجاتك الفعلية.

استخدم v-if + الطريقة العامة:

 < el-button
    v-if =" canAdd "
    type =" primary "
    icon =" el-icon-circle-plus-outline "
    size =" mini "
    @click =" add "
    >添加</ el-button >

 data ( ) {
    return {
      canAdd : this . hasPermissions ( [ "p_menu_edit" ] )
    } ;
  } ,

افتراضيًا، يتم استخدام كل من ترميز الأدوار وترميز الوظائف للتحقق، ويتطابق أحدهما فقط.

تتضمن الطرق المشابهة أيضًا hasFunctions و hasRoles .

الكود المصدري موجود في plugin/permission/index.js ويمكن تعديله وفقًا لاحتياجاتك الفعلية.

لا تستخدم v-if="hasPermissions(['p_menu_edit'])" مما سيؤدي إلى تنفيذ الطريقة عدة مرات

يمكنك أيضًا قراءة معلومات الإذن مباشرة من متجر vuex في المكون للتحقق.

اقتراحات التطوير

يتم وضع المكونات على مستوى الصفحة في دليل pages/ ويتم تصديرها في شكل قيمة مفتاح في routerMapCompnonents/index.js
يتم وضع القوائم الثابتة التي لا تتطلب التحكم في الأذونات في menu/aside.js و menu/header.js
يتم وضع المسارات التي لا تتطلب التحكم بالأذونات في router/routes.js frameIn
تتم إضافة القوائم والمسارات التي تتطلب التحكم بالأذونات من خلال وظيفة إدارة الواجهة. تأكد من أن path القائمة يتوافق مع path المسار فقط عندما يكون name المسار متوافقًا مع name مكون الصفحة يتم تفعيل keep-alive . component المسار موجود في routerMapCompnonents/index.js .
يمكن للمطورين أنفسهم صيانة إضافة القوائم والمسارات خلال مرحلة التطوير، ويمكن الاحتفاظ بالقائمة بعد الاتصال بالإنترنت، ويمكن تسليم القائمة إلى الأشخاص المعنيين للصيانة.

إذا وجدت الأمر مزعجًا ولا تريد إرجاع القوائم والمسارات من الواجهة الخلفية، فيمكنك الاحتفاظ بقائمة ومسارات على الواجهة الأمامية (لا تزال component الموجودة في المسارات تستخدم السلاسل، راجع mock/permissionMenuAndRouter.js )، والحفاظ على تستخدم الأذونات المقابلة في القوائم ومسارات الترميز بشكل عام الترميز الوظيفي. لا تحتاج الواجهة الخلفية إلى إرجاع معلومات القائمة والتوجيه، ولكن لا تزال هناك حاجة إلى معلومات الأذونات الأخرى، مثل تشفير الأدوار، وترميز الوظائف، وما إلى ذلك. من خلال قائمة رموز الوظيفة التي يتم إرجاعها بواسطة الواجهة الخلفية، تتم تصفية القوائم والمسارات التي يمتلك المستخدم أذونات عليها على الواجهة الأمامية. يتوافق تنسيق القوائم والمسارات التي تمت تصفيتها مع التنسيق الذي تم إرجاعه مسبقًا بواسطة الواجهة الخلفية، ثم القوائم التي تمت معالجتها ويتم استخدام المسارات كواجهة خلفية، ما عليك سوى التعامل معها بنفس الطريقة التي يتم بها إرجاعها من العميل.

السخرية من البيانات وتوليد الأكواد

يستخدم نموذج البيانات d2-admin-server المعدل من Lazy-mock، ويأتي البيانات في الواقع من الواجهة الخلفية، وهو يدعم ثبات البيانات ويستخدم ملفات json للتخزين ولا يحتاج إلى تثبيت قاعدة بيانات. يمكن للتكوين البسيط إنشاء واجهات تلقائيًا للإضافة والحذف والتعديل والاستعلام. للحصول على تفاصيل الاستخدام، يرجى الاطلاع على وثائق المحاكاة الكسولة.

تستخدم الواجهة الخلفية برامج وسيطة للتحكم في أذونات الوصول، مثل:

 . get ( '/menu' , PermissionCheck ( ) , controllers . menu . getMenuList )

يستخدم PermissionCheck الواجهة للتحقق بشكل افتراضي للتحقق مما إذا كانت واجهات برمجة التطبيقات التي يمكن للمستخدمين الوصول إليها تتطابق مع واجهة برمجة التطبيقات الحالية. PermissionCheck(["p_menu_edit"],["r_menu_admin"],true) يدعم استخدام ترميز الوظائف وترميز الأدوار للتحقق. ، معلمة الفصل الأول هي رمز الوظيفة، والثاني هو رمز الدور، والثالث هو ما إذا كان سيتم استخدام الواجهة للتحقق.

لا يزال إنشاء كود الواجهة الأمامية قيد التطوير...