d2 admin pm
1.0.0
Kodenya terlalu jelek, jadi tidak disarankan untuk menyalinnya. Anda bisa melihat ide implementasi RBAC yang bersifat universal.
git clone https://github.com/wjkang/d2-admin-pm.git
npm install
npm startMemerlukan dukungan dari layanan tiruan backend
git clone https://github.com/wjkang/d2-admin-server.git
npm install
npm start |  |  |
 |  |  |
Konten created di main.js ditransfer ke router/index.js , dan logika yang relevan ditambahkan.
plugin/axios/index.js kode terkait aksio yang dimodifikasi untuk mendukung kontrol izin tingkat antarmuka dan mendukung konfigurasi efek pemuatan.
Tambahkan modul menu ke vuex store dan tambahkan fullAside , path lengkapnya adalah store.state.d2admin.menu.fullAside
Tambahkan modul izin ke toko vuex untuk menyimpan kode izin fungsi pengguna, kode peran, antarmuka dengan izin akses dan apakah ID administratornya
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 ;
}
}
} Ini bagian dari tindakan load modul account di toko vuex:
// DB -> store 持久化数据加载上次退出时的多页列表
await dispatch ( 'd2admin/page/openedLoad' , null , { root : true } ) Buka router/index.js , itu perlu dijalankan setelah memuat rute izin.
菜单dan功能. Ada beberapa fungsi di bawah menu. Bidang permission dari jenis菜单mengidentifikasi permission功能yang diperlukan untuk mengakses menu ini alias fungsi ini, jadi tipe菜单Bidang permission adalah nilai permission node anak dari tipe功能.permission . Menggunakan logika login asli d2admin , penjaga perutean global menentukan apakah informasi izin telah ditarik, dan menandainya sebagai diperoleh setelah diperoleh.
Informasi izin yang perlu dikembalikan oleh backend mencakup kumpulan kode peran setelah pemfilteran izin, kumpulan kode fungsi, kumpulan informasi antarmuka, daftar menu, daftar perutean, dan apakah administrator sistem teridentifikasi. Formatnya adalah sebagai berikut
{
"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]"
}
} Gabungkan menu tetap ( /menu/header , /menu/aside ) dengan menu izin ( accessMenus ) yang dikembalikan oleh backend, dan simpan di modul vuex store yang sesuai
...
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 ) Secara default, routerMapComponents digunakan untuk memproses rute izin yang dikembalikan oleh backend.
//处理动态添加的路由
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 ] )Untuk metode pemrosesan perutean dan perbedaannya, silakan lihat artikel terkait nanti.
Simpan kumpulan pengkodean peran, kumpulan pengkodean fungsi, kumpulan informasi antarmuka, dan apakah ID administrator sistem disimpan dalam modul penyimpanan vuex yang sesuai
...
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 ) Mendukung kontrol menggunakan pengkodean peran, pengkodean fungsi dan izin antarmuka, sebagai berikut
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 berarti menggunakan izin antarmuka untuk kontrol. Jika informasi antarmuka yang disimpan di vuex store cocok dengan antarmuka yang sedang diminta, permintaan dapat dimulai, jika tidak, permintaan akan dicegat.
permission:["p_menu_view"] berarti menggunakan pengkodean peran dan pengkodean fungsi untuk verifikasi izin. Jika pengkodean peran atau pengkodean fungsi yang disimpan di penyimpanan vuex cocok dengan pengkodean yang saat ini diwakili, permintaan dapat dimulai, jika tidak, permintaan akan dicegat.
Kode sumber terletak di libs/permission.js dan dapat dimodifikasi sesuai kebutuhan Anda.
Kode sumber yang terkait dengan konfigurasi loading ada di libs/loading.js libs/loading.js Anda dapat mengonfigurasinya sesuai kebutuhan Anda. Hal yang sama juga berlaku untuk success . Mengikuti ide ini, Anda dapat mengonfigurasi sendiri fungsi lainnya, seperti kegagalan permintaan, dll.
Gunakan perintah v-permission :
< el-button
v-permission:function.all =" ['p_menu_edit'] "
type =" primary "
icon =" el-icon-edit "
size =" mini "
@click =" batchEdit "
>批量编辑</ el-button > Parameternya dapat berupa function atau role , yang menunjukkan bahwa pengkodean fungsi atau pengkodean peran digunakan untuk verifikasi.
Modifier all artinya semua kode pada nilai instruksi harus cocok.
Kode sumber terletak di plugin/permission/index.js dan dapat dimodifikasi sesuai kebutuhan Anda yang sebenarnya.
Gunakan metode 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" ] )
} ;
} ,Secara default, pengkodean peran dan pengkodean fungsi digunakan untuk verifikasi, dan hanya satu yang cocok.
Metode serupa juga mencakup hasFunctions dan hasRoles .
Kode sumber terletak di plugin/permission/index.js dan dapat dimodifikasi sesuai kebutuhan Anda yang sebenarnya.
Jangan gunakan
v-if="hasPermissions(['p_menu_edit'])", yang akan menyebabkan metode dieksekusi berkali-kali
Anda juga dapat langsung membaca informasi izin dari vuex store di komponen untuk verifikasi.
Komponen tingkat halaman ditempatkan di direktori pages/ dan diekspor dalam bentuk nilai kunci di routerMapCompnonents/index.js
Menu tetap yang tidak memerlukan kontrol izin ditempatkan di menu/aside.js dan menu/header.js
Rute yang tidak memerlukan kontrol izin ditempatkan di frameIn router/routes.js
Menu dan rute yang memerlukan kontrol izin ditambahkan melalui fungsi manajemen antarmuka. Pastikan path menu sesuai dengan path rute Hanya jika name rute konsisten dengan name komponen halaman keep-alive berlaku. component rute ada di routerMapCompnonents/index.js
Penambahan menu dan rute selama tahap pengembangan dapat dikelola oleh pengembang sendiri dan daftar dapat dipertahankan. Setelah online, daftar tersebut dapat diserahkan kepada orang terkait untuk pemeliharaan.
Jika Anda merasa merepotkan dan tidak ingin menu dan rute dikembalikan dari backend, Anda dapat mempertahankan menu dan rute di frontend (
componentdalam rute masih menggunakan string, lihatmock/permissionMenuAndRouter.js), dan pertahankan izin yang sesuai pada menu dan rute Pengkodean, umumnya menggunakan pengkodean fungsional. Backend tidak perlu mengembalikan informasi menu dan perutean, tetapi informasi izin lainnya, seperti pengkodean peran, pengkodean fungsi, dll., masih diperlukan. Melalui daftar kode fungsi yang dikembalikan oleh backend, menu dan rute yang izinnya dimiliki pengguna disaring di frontend. Format menu dan rute yang difilter konsisten dengan format yang sebelumnya dikembalikan oleh backend, dan kemudian menu yang diproses dan rute digunakan sebagai backend. Tangani saja sama seperti yang dikembalikan dari klien.
Data mock menggunakan d2-admin-server yang dimodifikasi dari lag-mock. Data sebenarnya berasal dari backend. Dibandingkan dengan alat lain, alat ini mendukung persistensi data. Alat ini menggunakan file json untuk penyimpanan dan tidak perlu menginstal database. Konfigurasi sederhana dapat secara otomatis menghasilkan antarmuka untuk penambahan, penghapusan, modifikasi, dan kueri. Untuk penggunaan detailnya, silakan lihat dokumentasi malas-mock.
Backend menggunakan middleware untuk mengontrol izin akses, seperti:
. get ( '/menu' , PermissionCheck ( ) , controllers . menu . getMenuList ) PermissionCheck menggunakan antarmuka untuk verifikasi secara default untuk memverifikasi apakah API yang dapat diakses oleh pengguna cocok dengan API saat ini. PermissionCheck(["p_menu_edit"],["r_menu_admin"],true) mendukung penggunaan pengkodean fungsi dan pengkodean peran untuk verifikasi. , Parameter Bab Satu adalah kode fungsi, yang kedua adalah kode peran, dan yang ketiga adalah apakah akan menggunakan antarmuka untuk verifikasi.
Pembuatan kode front-end masih dalam pengembangan...
Ringkasan metode implementasi perutean izin vue Ringkasan metode implementasi perutean izin vue 2. Seri desain arsitektur pemisahan front-end dan back-end sistem manajemen perusahaan 1. Model izin
