d2 admin pm
1.0.0
Код слишком уродлив, поэтому копировать его не рекомендуется. Вы можете посмотреть идею реализации 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 |  |  |
 |  |  |
created контент в main.js переносится в router/index.js и добавляется соответствующая логика.
Изменен код plugin/axios/index.js связанный с axios, для поддержки управления разрешениями на уровне интерфейса и настройки эффектов загрузки.
Добавьте модуль меню в хранилище 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 , его необходимо выполнить после загрузки маршрута разрешений.
菜单и功能. В меню может быть несколько функций. Поле permission типа菜单определяет разрешения на функции, необходимые для доступа к этому меню. Поле permission типа功能эквивалентно . псевдоним этой функции, поэтому тип菜单. Поле permission — это значение permission дочернего узла功能типа.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 . Вы можете настроить его в соответствии со своими потребностями. То же самое относится и к success . Исходный код находится в libs/loading.js . Следуя этой идее, вы можете самостоятельно настроить и другие функции, например, отказ запроса и т.п.
Используйте директиву 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
Маршруты, не требующие контроля разрешений, помещаются в frameIn router/routes.js
Меню и маршруты, требующие контроля разрешений, добавляются через функцию управления интерфейса. Убедитесь, что path меню соответствует path маршрута. Только если name маршрута соответствует name компонента страницы. keep-alive вступает в силу. component маршрута находится в routerMapCompnonents/index.js .
Добавление меню и маршрутов на этапе разработки может поддерживаться самими разработчиками, а список может поддерживаться. После выхода в Интернет список можно передать соответствующим людям для обслуживания.
Если вы считаете это затруднительным и не хотите, чтобы меню и маршруты возвращались из серверной части, вы можете поддерживать меню и маршруты во внешнем интерфейсе (
componentв маршрутах по-прежнему используют строки, см.mock/permissionMenuAndRouter.js) и поддерживать соответствующие разрешения для меню и маршрутов. Кодирование, как правило, использует функциональное кодирование. Серверной части не требуется возвращать информацию о меню и маршрутизации, но другая информация о разрешениях, такая как кодирование ролей, кодирование функций и т. д., по-прежнему необходима. Через список кодов функций, возвращаемый серверной частью, меню и маршруты, к которым у пользователя есть разрешения, отфильтровываются во внешнем интерфейсе. Формат отфильтрованных меню и маршрутов соответствует формату, ранее возвращенному серверной частью, а затем обработанным меню. и маршруты используются в качестве бэкэнда. Просто обрабатывайте их так же, как и то, что возвращается от клиента.
В макете данных используется d2-admin-server, модифицированный на основе lazy-mock. По сравнению с другими инструментами он поддерживает сохранение данных и не требует установки базы данных. Простая конфигурация позволяет автоматически создавать интерфейсы для добавления, удаления, изменения и запроса. Подробное описание использования см. в документации lazy-mock.
Серверная часть использует промежуточное программное обеспечение для управления разрешениями доступа, например:
. get ( '/menu' , PermissionCheck ( ) , controllers . menu . getMenuList ) PermissionCheck по умолчанию использует интерфейс для проверки, чтобы проверить PermissionCheck(["p_menu_edit"],["r_menu_admin"],true) соответствуют ли API, доступные пользователям, текущему API. Он поддерживает использование кодирования функций и ролей для проверки. , Первый параметр главы — это код функции, второй — код роли, а третий — использовать ли интерфейс для проверки.
Генерация внешнего кода все еще находится в стадии разработки...
Краткое описание метода реализации маршрутизации разрешений vue Краткое описание метода реализации маршрутизации разрешений vue 2. Серия проектов архитектуры разделения внешней и внутренней системы управления предприятием 1. Модель разрешений
