d2 admin pm
1.0.0
O código é muito feio, por isso não é recomendado copiá-lo. Você pode dar uma olhada na ideia de implementação do RBAC, que é universal.
git clone https://github.com/wjkang/d2-admin-pm.git
npm install
npm startRequer suporte do serviço simulado de back-end
git clone https://github.com/wjkang/d2-admin-server.git
npm install
npm start |  |  |
 |  |  |
O conteúdo created em main.js é transferido para router/index.js e a lógica relevante é adicionada.
Modificado o código relacionado ao axios plugin/axios/index.js para suportar controle de permissão em nível de interface e suportar configuração de efeitos de carregamento.
Adicione o módulo de menu à loja vuex e adicione fullAside , o caminho completo é store.state.d2admin.menu.fullAside
Adicione o módulo de permissão ao armazenamento vuex para armazenar o código de permissão de função do usuário, código de função, interface com permissões de acesso e se o ID do administrador é
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 ;
}
}
} Esta parte da ação load do módulo account na loja vuex:
// DB -> store 持久化数据加载上次退出时的多页列表
await dispatch ( 'd2admin/page/openedLoad' , null , { root : true } ) Vá para router/index.js , ele precisa ser executado após carregar a rota de permissão.
菜单e功能. O campo permission permission do tipo菜单identifica as permissões de功能necessárias para acessar este menu. o alias desta função, então菜单O campo permission é permission de um nó filho de um tipo功能.permission . Usando a lógica de login original de d2admin , o guarda de roteamento global determina se as informações de permissão foram extraídas e marca-as como obtidas após serem obtidas.
As informações de permissão que o back-end precisa retornar incluem o conjunto de códigos de função após a filtragem de permissão, o conjunto de códigos de função, o conjunto de informações de interface, a lista de menus, a lista de roteamento e se o administrador do sistema foi identificado. O formato é o seguinte
{
"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]"
}
} Mesclar o menu fixo ( /menu/header , /menu/aside ) com o menu de permissão ( accessMenus ) retornado pelo backend e armazená-lo no módulo de loja vuex correspondente
...
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 ) Por padrão, routerMapComponents é usado para processar rotas de permissão retornadas pelo back-end.
//处理动态添加的路由
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 ] )Para métodos e diferenças de processamento de roteamento, consulte os artigos relacionados posteriormente.
Armazene o conjunto de codificação de função, conjunto de codificação de função, conjunto de informações de interface e se o ID do administrador do sistema está armazenado no módulo de armazenamento vuex correspondente
...
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 ) Suporta controle usando codificação de função, codificação de função e permissões de interface, como segue
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 significa usar permissões de interface para controle. Se as informações da interface armazenadas no armazenamento vuex corresponderem à interface que está sendo solicitada no momento, a solicitação poderá ser iniciada, caso contrário, a solicitação será interceptada.
permission:["p_menu_view"] significa usar codificação de função e codificação de função para verificação de permissão. Se a codificação de função ou codificação de função armazenada no armazenamento vuex corresponder à codificação atualmente representada, uma solicitação poderá ser iniciada, caso contrário, a solicitação será interceptada.
O código fonte está localizado em libs/permission.js e pode ser modificado de acordo com suas necessidades.
O código-fonte relacionado à configuração success loading está em libs/loading.js . Você pode configurá-lo de acordo com suas próprias necessidades. O código-fonte está em libs/loading.js . Seguindo essa ideia, você mesmo pode configurar outras funções, como falha de solicitação, etc.
Use a diretiva v-permission :
< el-button
v-permission:function.all =" ['p_menu_edit'] "
type =" primary "
icon =" el-icon-edit "
size =" mini "
@click =" batchEdit "
>批量编辑</ el-button > O parâmetro pode ser function ou role , indicando que a codificação da função ou a codificação da função é usada para verificação. Se estiver vazio, ambos serão usados para verificação.
O modificador all significa que todos os códigos no valor da instrução devem corresponder.
O código fonte está localizado em plugin/permission/index.js e pode ser modificado de acordo com suas reais necessidades.
Use v-if + método 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" ] )
} ;
} ,Por padrão, tanto a codificação de função quanto a codificação de função são usadas para verificação e apenas uma delas corresponde.
Métodos semelhantes também incluem hasFunctions e hasRoles .
O código fonte está localizado em plugin/permission/index.js e pode ser modificado de acordo com suas reais necessidades.
Não use
v-if="hasPermissions(['p_menu_edit'])", o que fará com que o método seja executado várias vezes
Você também pode ler diretamente as informações de permissão do armazenamento vuex no componente para verificação.
Os componentes de nível de página são colocados no diretório pages/ e exportados na forma de valor-chave em routerMapCompnonents/index.js
Menus fixos que não requerem controle de permissão são colocados em menu/aside.js e menu/header.js
Rotas que não requerem controle de permissão são colocadas em router/routes.js frameIn
Menus e rotas que requerem controle de permissão são adicionados através da função de gerenciamento da interface. Certifique-se de que path do menu corresponda path da rota Somente quando name da rota for consistente com name do componente da página. keep-alive entra em vigor. component da rota está em routerMapCompnonents/index.js .
A adição de menus e rotas durante a fase de desenvolvimento pode ser mantida pelos próprios desenvolvedores e uma lista pode ser mantida. Depois de ficar online, a lista pode ser entregue a pessoas relevantes para manutenção.
Se você achar isso problemático e não quiser que menus e rotas sejam retornados do backend, você pode manter um menu e rotas no frontend (
componentnas rotas ainda usam strings, consultemock/permissionMenuAndRouter.js) e manter as permissões correspondentes nos menus e rotas Codificação, geralmente usa codificação funcional. O backend não precisa retornar informações de menu e roteamento, mas outras informações de permissão, como codificação de função, codificação de função, etc., ainda são necessárias. Através da lista de códigos de função retornada pelo backend, os menus e rotas que o usuário tem permissão são filtrados no frontend. O formato dos menus e rotas filtrados é consistente com o formato retornado anteriormente pelo backend e, em seguida, com os menus processados. e as rotas são usadas como back-end. Basta tratá-lo da mesma forma que é retornado do cliente.
A simulação de dados usa d2-admin-server modificado a partir de uma simulação preguiçosa. Os dados, na verdade, vêm do back-end. Em comparação com outras ferramentas, ele usa arquivos JSON para armazenamento e não precisa instalar um banco de dados. A configuração simples pode gerar automaticamente interfaces para adição, exclusão, modificação e consulta. Para uso detalhado, consulte a documentação do lazy-mock.
O backend usa middleware para controlar permissões de acesso, como:
. get ( '/menu' , PermissionCheck ( ) , controllers . menu . getMenuList ) PermissionCheck usa a interface para verificação por padrão para verificar se as APIs acessíveis aos usuários correspondem à API atual. PermissionCheck(["p_menu_edit"],["r_menu_admin"],true) suporta o uso de codificação de função e codificação de função para verificação. , O parâmetro do Capítulo Um é o código de função, o segundo é o código de função e o terceiro é se deve usar a interface para verificação.
A geração de código front-end ainda está em desenvolvimento...
Resumo do método de implementação de roteamento de permissão vue Resumo do método de implementação de roteamento de permissão vue 2. Série de design de arquitetura de separação de front-end e back-end do sistema de gerenciamento empresarial 1. Modelo de permissão
