d2 admin pm
1.0.0
Der Code ist zu hässlich, daher wird nicht empfohlen, ihn zu kopieren. Sie können sich die Implementierungsidee von RBAC ansehen, die universell ist.
git clone https://github.com/wjkang/d2-admin-pm.git
npm install
npm startErfordert Unterstützung durch den Backend-Mock-Service
git clone https://github.com/wjkang/d2-admin-server.git
npm install
npm start |  |  |
 |  |  |
Der in main.js created Inhalt wird an router/index.js übertragen und relevante Logik hinzugefügt.
Der axios- bezogene Code plugin/axios/index.js wurde geändert, um die Berechtigungskontrolle auf Schnittstellenebene und die Konfiguration von Ladeeffekten zu unterstützen.
Fügen Sie das Menümodul zum Vuex-Store hinzu und fügen Sie fullAside hinzu. Der vollständige Pfad lautet store.state.d2admin.menu.fullAside
Fügen Sie dem Vuex-Store das Berechtigungsmodul hinzu, um den Funktionsberechtigungscode, den Rollencode, die Schnittstelle mit den Zugriffsberechtigungen des Benutzers und die Angabe der Administrator-ID zu speichern
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 ;
}
}
} Dieser Teil load des account im Vuex-Store:
// DB -> store 持久化数据加载上次退出时的多页列表
await dispatch ( 'd2admin/page/openedLoad' , null , { root : true } ) Gehen Sie zu router/index.js . Es muss nach dem Laden der Berechtigungsroute ausgeführt werden.
菜单. permission einem Menü功能mehrere Funktionen vorhanden sein. Das permission功能菜单Der Alias dieser Funktion, also菜单. Das permission ist permission eines untergeordneten Knotens eines功能.permission zugreifen können. Mithilfe der ursprünglichen Anmeldelogik von d2admin ermittelt der globale Routing-Guard, ob die Berechtigungsinformationen abgerufen wurden, und markiert sie nach dem Abruf als erhalten.
Zu den Berechtigungsinformationen, die das Backend zurückgeben muss, gehören der Rollencodesatz nach der Berechtigungsfilterung, der Funktionscodesatz, der Schnittstelleninformationssatz, die Menüliste, die Routingliste und ob der Systemadministrator identifiziert ist. Das Format ist wie folgt
{
"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]"
}
} Führen Sie das feste Menü ( /menu/header , /menu/aside ) mit dem vom Backend zurückgegebenen Berechtigungsmenü ( accessMenus ) zusammen und speichern Sie es im entsprechenden Vuex-Store-Modul
...
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 ) Standardmäßig wird routerMapComponents verwendet, um vom Backend zurückgegebene Berechtigungsrouten zu verarbeiten.
//处理动态添加的路由
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 ] )Informationen zu Routing-Verarbeitungsmethoden und Unterschieden finden Sie in den entsprechenden Artikeln weiter unten.
Speichern Sie den Rollencodierungssatz, den Funktionscodierungssatz, den Schnittstelleninformationssatz und ob die Systemadministrator-ID im entsprechenden Vuex-Store-Modul gespeichert ist
...
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 ) Unterstützt die Steuerung mithilfe von Rollencodierung, Funktionscodierung und Schnittstellenberechtigungen wie folgt
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 bedeutet, dass Schnittstellenberechtigungen zur Steuerung verwendet werden. Wenn die im Vuex-Speicher gespeicherten Schnittstelleninformationen mit der aktuell angeforderten Schnittstelle übereinstimmen, kann die Anforderung initiiert werden, andernfalls wird die Anforderung abgefangen.
permission:["p_menu_view"] bedeutet, dass Rollenkodierung und Funktionskodierung zur Berechtigungsüberprüfung verwendet werden. Wenn die im Vuex-Speicher gespeicherte Rollenkodierung oder Funktionskodierung mit der aktuell dargestellten Kodierung übereinstimmt, kann eine Anfrage initiiert werden, andernfalls wird die Anfrage abgefangen.
Der Quellcode befindet sich in libs/permission.js und kann nach Ihren eigenen Bedürfnissen geändert werden.
Der Quellcode für loading befindet sich in libs/loading.js libs/loading.js Sie können ihn entsprechend Ihren eigenen Anforderungen konfigurieren. Dasselbe gilt für success . Dieser Idee folgend können Sie andere Funktionen selbst konfigurieren, z. B. Anforderungsfehler usw.
Verwenden Sie die Direktive v-permission :
< el-button
v-permission:function.all =" ['p_menu_edit'] "
type =" primary "
icon =" el-icon-edit "
size =" mini "
@click =" batchEdit "
>批量编辑</ el-button > Der Parameter kann function oder role sein, was darauf hinweist, dass die Funktionscodierung oder die Rollencodierung zur Überprüfung verwendet wird. Wenn er leer ist, werden beide zur Überprüfung verwendet.
Der Modifikator all bedeutet, dass alle Codes im Anweisungswert übereinstimmen müssen.
Der Quellcode befindet sich plugin/permission/index.js und kann entsprechend Ihren tatsächlichen Anforderungen geändert werden.
Verwenden Sie die globale Methode 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" ] )
} ;
} ,Standardmäßig werden zur Überprüfung sowohl Rollen- als auch Funktionscodierung verwendet, und nur eine davon stimmt überein.
Ähnliche Methoden umfassen auch hasFunctions und hasRoles .
Der Quellcode befindet sich plugin/permission/index.js und kann entsprechend Ihren tatsächlichen Anforderungen geändert werden.
Verwenden Sie nicht
v-if="hasPermissions(['p_menu_edit'])", da dies dazu führen würde, dass die Methode mehrmals ausgeführt wird
Sie können die Berechtigungsinformationen zur Überprüfung auch direkt aus dem Vuex-Store in der Komponente lesen.
Komponenten auf Seitenebene werden im Verzeichnis pages/ abgelegt und in Form eines Schlüsselwerts in routerMapCompnonents/index.js exportiert
Feste Menüs, die keine Berechtigungskontrolle erfordern, werden in menu/aside.js und menu/header.js platziert
Routen, die keine Berechtigungskontrolle erfordern, werden im frameIn router/routes.js platziert
Menüs und Routen, die eine Berechtigungskontrolle erfordern, werden über die Verwaltungsfunktion der Schnittstelle hinzugefügt. Stellen Sie sicher, dass path des Menüs path der Route entspricht. Nur wenn name der Route mit name der Seitenkomponente übereinstimmt keep-alive wird wirksam. component der Route befindet sich in routerMapCompnonents/index.js .
Das Hinzufügen von Menüs und Routen während der Entwicklungsphase kann von den Entwicklern selbst gepflegt werden und eine Liste kann gepflegt werden. Nach dem Online-Gehen kann die Liste an relevante Personen zur Wartung übergeben werden.
Wenn Sie es als problematisch empfinden und nicht möchten, dass Menüs und Routen vom Backend zurückgegeben werden, können Sie ein Menü und Routen im Frontend verwalten (
componentin den Routen verwenden weiterhin Zeichenfolgen, siehemock/permissionMenuAndRouter.js) und verwalten die entsprechenden Berechtigungen für die Menüs und Routen. Codierung, im Allgemeinen funktionale Codierung. Das Backend muss keine Menü- und Routing-Informationen zurückgeben, es sind jedoch weiterhin andere Berechtigungsinformationen wie Rollencodierung, Funktionscodierung usw. erforderlich. Durch die vom Backend zurückgegebene Funktionscodeliste werden die Menüs und Routen, für die der Benutzer Berechtigungen hat, im Frontend herausgefiltert. Das Format der gefilterten Menüs und Routen stimmt mit dem zuvor vom Backend zurückgegebenen Format und dann mit den verarbeiteten Menüs überein und Routen werden als Backend verwendet. Behandeln Sie es einfach genauso wie das, was vom Client zurückgegeben wird.
Data Mock verwendet den von Lazy-Mock modifizierten D2-Admin-Server. Im Vergleich zu anderen Tools unterstützt es die Datenpersistenz und erfordert keine Installation einer Datenbank. Durch die einfache Konfiguration können automatisch Schnittstellen zum Hinzufügen, Löschen, Ändern und Abfragen generiert werden. Eine detaillierte Verwendung finden Sie in der Lazy-Mock-Dokumentation.
Das Backend verwendet Middleware, um Zugriffsberechtigungen zu steuern, wie zum Beispiel:
. get ( '/menu' , PermissionCheck ( ) , controllers . menu . getMenuList ) PermissionCheck verwendet die Schnittstelle standardmäßig zur Überprüfung, um zu überprüfen PermissionCheck(["p_menu_edit"],["r_menu_admin"],true) ob die für Benutzer zugänglichen APIs mit der aktuellen API übereinstimmen. Es unterstützt die Verwendung von Funktionscodierung und Rollencodierung zur Überprüfung. , Kapitel Eins Parameter ist der Funktionscode, der zweite ist der Rollencode und der dritte ist, ob die Schnittstelle zur Überprüfung verwendet werden soll.
Die Generierung des Frontend-Codes befindet sich noch in der Entwicklung ...
Zusammenfassung der Implementierungsmethode für das Vue-Berechtigungsrouting Zusammenfassung der Implementierungsmethode für das Vue-Berechtigungsrouting 2. Entwurfsreihe für die Front-End- und Back-End-Trennarchitektur des Unternehmensverwaltungssystems 1. Berechtigungsmodell
