ดาวน์โหลด 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 และเพิ่มตรรกะที่เกี่ยวข้อง

แก้ไข plugin/axios/index.js โค้ดที่เกี่ยวข้องกับ axios /axios/index.js เพื่อรองรับการควบคุมสิทธิ์ระดับอินเทอร์เฟซและรองรับการกำหนดค่าเอฟเฟกต์การโหลด

เพิ่มโมดูล เมนู ในร้านค้า vuex และเพิ่ม fullAside เส้นทางแบบเต็มคือ store.state.d2admin.menu.fullAside

เพิ่มโมดูล การอนุญาต ไปยังร้านค้า vuex เพื่อจัดเก็บรหัสการอนุญาตฟังก์ชันของผู้ใช้ รหัสบทบาท อินเทอร์เฟซที่มีสิทธิ์การเข้าถึง และ ID ผู้ดูแลระบบเป็นหรือไม่

 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

กระบวนการทำงานและ API ที่เกี่ยวข้อง

การใช้ตรรกะการเข้าสู่ระบบดั้งเดิมของ 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 ] )

สำหรับวิธีการประมวลผลการกำหนดเส้นทางและความแตกต่าง โปรดดูบทความที่เกี่ยวข้องในภายหลัง

ตั้งค่าข้อมูลการอนุญาต

จัดเก็บชุดการเข้ารหัสบทบาท ชุดการเข้ารหัสฟังก์ชัน ชุดข้อมูลอินเทอร์เฟซ และ ID ผู้ดูแลระบบถูกจัดเก็บไว้ในโมดูลร้านค้า 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 + global:

 < 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

อย่าใช้ 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 ) และบำรุงรักษา สิทธิ์ที่สอดคล้องกันบนเมนูและเส้นทางการเข้ารหัสโดยทั่วไปจะใช้การเข้ารหัสการทำงาน แบ็กเอนด์ไม่จำเป็นต้องส่งคืนข้อมูลเมนูและข้อมูลเส้นทาง แต่ยังจำเป็นต้องมีข้อมูลการอนุญาตอื่นๆ เช่น การเข้ารหัสบทบาท การเข้ารหัสฟังก์ชัน ฯลฯ รายการโค้ดฟังก์ชันที่ส่งคืนโดยส่วนหลัง เมนูและเส้นทางที่ผู้ใช้มีสิทธิ์จะถูกกรองออกที่ส่วนหน้า รูปแบบของเมนูและเส้นทางที่กรองจะสอดคล้องกับรูปแบบที่ส่งคืนก่อนหน้านี้โดยส่วนหลัง จากนั้นจึงกรองเมนูที่ประมวลผล และเส้นทางถูกใช้เป็นแบ็กเอนด์ เพียงจัดการเหมือนกับที่ส่งคืนจากไคลเอนต์

การเยาะเย้ยข้อมูลและการสร้างรหัส

Data mock ใช้ d2-admin-server ที่แก้ไขจาก lazy-mock ข้อมูลจริงมาจากแบ็กเอนด์ เมื่อเปรียบเทียบกับเครื่องมืออื่นๆ มันใช้ไฟล์ json สำหรับการจัดเก็บและไม่จำเป็นต้องติดตั้งฐานข้อมูล การกำหนดค่าอย่างง่ายสามารถสร้างอินเทอร์เฟซสำหรับการเพิ่ม การลบ การแก้ไข และการสืบค้นได้โดยอัตโนมัติ สำหรับการใช้งานโดยละเอียด โปรดดูเอกสารประกอบการเยาะเย้ยแบบขี้เกียจ

แบ็กเอนด์ใช้มิดเดิลแวร์เพื่อควบคุมสิทธิ์การเข้าถึง เช่น:

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

PermissionCheck ใช้อินเทอร์เฟซสำหรับการตรวจสอบตามค่าเริ่มต้นเพื่อตรวจสอบว่า API ที่ผู้ใช้สามารถเข้าถึงได้นั้นตรงกับ API ปัจจุบัน PermissionCheck(["p_menu_edit"],["r_menu_admin"],true) โดยรองรับการใช้การเข้ารหัสฟังก์ชันและการเข้ารหัสบทบาทสำหรับการตรวจสอบ พารามิเตอร์บทที่หนึ่งคือโค้ดฟังก์ชัน พารามิเตอร์ตัวที่สองคือรหัสบทบาท และพารามิเตอร์ที่สามคือว่าจะใช้อินเทอร์เฟซสำหรับการตรวจสอบหรือไม่

การสร้างโค้ดส่วนหน้ายังอยู่ระหว่างการพัฒนา...

บทความที่เกี่ยวข้อง

สรุปวิธีการดำเนินการกำหนดเส้นทางการอนุญาต vue สรุปวิธีการดำเนินการกำหนดเส้นทางการอนุญาต vue 2. ชุดการออกแบบสถาปัตยกรรมการแยกส่วนหน้าและส่วนหลังของระบบการจัดการองค์กร 1. รูปแบบการอนุญาต

ขยาย