在d2-admin-start-kit的基础上增加权限验证。

git clone https://github.com/lfyfly/d2-admin-start-kit-with-permission.git git checkout permission npm install npm run dev 配置 1. 配置 src/api/modules/sys.user.api.js，mock的登录接口user的roles和isSuperAdmin字段。 roles: [ role:String ]，代表可访问该页面的角色 isSuperAdmin: Boolean，代表是否为超级管理员。超级管理员拥有任何权限，如果isSuperAdmin为true,则不会验证roles。

const users = [ { username: 'admin', password: 'admin', uuid: 'admin-uuid', name: 'Admin', roles: ['admin'], isSuperAdmin: true }, { username: 'editor', password: 'editor', uuid: 'editor-uuid', name: 'Editor', roles: ['editor'] }, { username: 'user1', password: 'user1', uuid: 'user1-uuid', name: 'User1', roles: ['user'] } ] 2. 配置src/router/frameIn 中的路由的 meta.roles

单个路由，菜单上没有收展

const index = { path: '/index', // 必填 name: 'index', // 必填 title: '首页', // 必填，菜单栏上显示的标题 icon: 'home', // 必填 meta: { title: '首页', // 必填，tab上显示的标题 auth: true // 选填，代表是否要登录 }, component: _import('system/index') }

一组路由，菜单上有收展

const system = { title: '系统管理', // 必填，菜单组的标题，所以没有path属性 icon: 'folder-o', // 必填 children: [ { path: '/system/roles', // 必填 name: '/system/roles', // 必填 title: '角色管理_', // 必填，应该和meta.title一致，这里加下划线，在网页中可以看出是代表菜单的title显示 meta: { title: '角色管理', // 必填，tab上显示的标题 auth: true, roles: ['admin'] // 选填。不填，代表不验证roles，所有登录用户都可访问；填了代表要验证roles。且不管meta.auth填了什么，都要求登录。 }, component: _import('sys/roles') }, { path: '/system/admins', name: '/system/admins', title: '管理员列表_', meta: { title: '管理员列表', auth: true, roles: ['admin'] }, component: _import('sys/admins') } ] }

Tip：配置完了，别忘了在src/router/routes.js 中导入，和导出configForMenu

git clone https://github.com/lfyfly/d2-admin-start-kit-with-permission.git git checkout authkey-permission npm install npm run dev 配置 1. 配置 src/api/modules/sys.user.api.js，mock的登录接口user的authKeys和isSuperAdmin字段。 authKeys: { pages: [ path:String ] , apis: [ api:String ] } pages代表可访问的页面， apis代表可访问的api isSuperAdmin: Boolean，代表是否为超级管理员。超级管理员拥有任何权限，如果isSuperAdmin为true,则不会验证authKeys。

const users = [ { username: 'admin', password: 'admin', uuid: 'admin-uuid', name: 'Admin', authKeys: {}, isSuperAdmin: true }, { username: 'editor', password: 'editor', uuid: 'editor-uuid', name: 'Editor', authKeys: { pages: ['/news/list', '/news/edit'], // 代表可访问的页面 apis: ['/api/news/create', '/api/news/get', '/api/news/edit'] // 代表可访问的api } }, { username: 'user1', password: 'user1', uuid: 'user1-uuid', name: 'User1', authKeys: { pages: ['/pages/page1', '/pages/page2', '/pages/page3'], apis: ['/api/create', '/api/get', '/api/edit'] // 没有'/api/delete' } } ] 2. 配置src/router/frameIn 中的路由的 meta.authKey meta.authKey: String 一般直接使用path

const system = { title: '系统管理', icon: 'folder-o', children: [ { path: '/system/roles', name: '/system/roles', title: '角色管理_', meta: { title: '角色管理', auth: true, authKey: '/system/roles' // 一般直接使用`path` }, component: _import('sys/roles') }, { path: '/system/admins', name: '/system/admins', title: '管理员列表_', meta: { title: '管理员列表', auth: true, authKey: '/system/admins' }, component: _import('sys/admins') } ] }

Tip：配置完了，别忘了在src/router/routes.js 中导入，和导出configForMenu

参考 src/views/page1/index.vue 和 src/AuthContainer.vue