GitHub デモのアドレス
オンラインプレビュー
序文
ルートの動的取得に関しては、スキームVue - vue-admin-template テンプレート プロジェクトの変更がここに示されています: メニュー ルートの動的取得
これに基づいて、ユーザー管理、ロール管理、メニューを含むシステム管理モジュールが追加されました。管理、および辞書管理。これにはボタンの権限設定が含まれており、データとネットワークのリクエストはモックを通じて実装されます。
具体代码请看demo!!!
ローカル権限制御。具体的には、ユーザー情報を照会してユーザー ロールを取得し、ルート ガードのロールを通じてローカルに設定されたルートをフィルタリングし、ロールの権限に準拠するルートのルート配列を生成します。
メニュー ルーティングを動的に取得するという考え方は、実際には同じです。ただし、特定のロールのメニュー リストをクエリすることによってルーティング配列がサーバーから取得され、取得したメニュー配列がルーティング ガード内のルーティング配列に変換される点が異なります。 。
動的ルーティングの実装は、vue-element-adminの問題を参照して作成されています。関連する問題:
vue-element-admin/issues/167
vue-element-admin/issues/293
vue-element-admin/issues/3326#issuecomment -832852647
キーポイント
主にインターフェイス メニュー リストで、親を文字列 'Layout'
componentに変更し、コンポーネントを () => import('@/views/table/index') に変更し、文字列 'table/index' に変更してから取得します。データにコピーしてから転送し直すLayout
children
!!!!!!!!!!!! 接口格式可以根据项目需要自定义，不一定非得按照这里的来
実際のルート:
{
path: '/system',
name: 'system',
// component: Layout,
component: 'Layout',
meta: {
title: 'System Settings', icon: 'table', roles: ['admin'] },
children: [
{
path: 'user',
name: 'user',
// component: () => import('@/views/system/user'),
component: 'system/user',
meta: {
title: 'User Management',
roles: ['admin'],
buttons: ['user-add', 'user-edit', 'user-look', 'user-export', 'user-delete', 'user-assign', 'user-resetPwd']
}
}
]
},
インターフェイスによって返されるルート形式:
{
id: '22',
code: '/system',
title: '系统设置',
parentId: '',
parentTitle: '',
menuType: 'catalog', // catalog | menu | button
component: 'Layout', // "Layout" | "system/menu" (文件路径: src/views/) | ""
// component: Layout,
icon: 'el-icon-setting',
sort: 1,
hidden: false,
level: 1,
children: [
{
id: '22-1',
code: 'user',
title: '用户管理',
parentId: '22',
parentTitle: '系统设置',
menuType: 'menu',
component: 'system/user',
// component: () => import('@/views/system/user'),
icon: '',
sort: 2,
hidden: false,
level: 2,
children: [],
buttons: ['user-add', 'user-edit', 'user-look', 'user-export', 'user-delete', 'user-assign', 'user-resetPwd']
},
{
id: '22-2',
code: 'role',
title: '角色管理',
parentId: '22',
parentTitle: '系统设置',
menuType: 'menu',
component: 'system/role',
icon: '',
sort: 3,
hidden: false,
level: 2,
children: [],
buttons: ['role-add', 'role-edit', 'role-look', 'role-delete', 'role-setting']
},
{
id: '22-3',
code: 'menu',
title: '菜单管理',
parentId: '22',
parentTitle: '系统设置',
menuType: 'menu',
component: 'system/menu',
icon: '',
sort: 4,
hidden: false,
level: 2,
children: [],
buttons: ['menu-add', 'menu-edit', 'menu-look', 'menu-delete']
},
{
id: '22-4',
code: 'dict',
title: '字典管理',
parentId: '22',
parentTitle: '系统设置',
menuType: 'menu',
component: 'system/dict',
icon: '',
sort: 5,
hidden: false,
level: 2,
children: [],
buttons: ['dict-type-add', 'dict-type-edit', 'dict-type-delete', 'dict-item-add', 'dict-item-edit', 'dict-item-delete']
}
]
}
2. ボタンの権限について
// Use action
// v-permission="{action:'menu-add'}"
Vue.directive('permission', {
inserted: function(el, binding) {
const action = binding.value.action
const currentRight = router.currentRoute.meta.buttons
if (currentRight) {
if (currentRight.indexOf(action) === -1) {
// no permission
const type = binding.value.effect
if (type === 'disabled') {
el.disabled = true
el.classList.add('is-disabled')
} else {
el.parentNode.removeChild(el)
}
}
}
}
})
使用
<el-button v-permission="{action:'menu-add'}" size="small" type="primary" @click="onAdd"><i class="el-icon-plus" />新增 </el-button>
レンダリング
- ユーザー管理
- ユーザー管理 - 役割の割り当て
- 役割管理
- 役割管理 - 権限の割り当て
- メニュー管理
- 辞書管理
