Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c963f56

Browse files
reuwiPanJiaChen
reuwi
authored and
PanJiaChen
committed
feature[Permission]: add role permission management page (PanJiaChen#1605)
增加角色权限管理菜单
1 parent 17f0d84 commit c963f56

File tree

14 files changed

+467
-58
lines changed

14 files changed

+467
-58
lines changed

‎src/api/role.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import request from '@/utils/request'
2+
3+
export function getRoutes() {
4+
return request({
5+
url: '/routes',
6+
method: 'get'
7+
})
8+
}
9+
10+
export function getRoles() {
11+
return request({
12+
url: '/roles',
13+
method: 'get'
14+
})
15+
}
16+
17+
export function deleteRole(id) {
18+
return request({
19+
url: `/roles/${id}`,
20+
method: 'delete'
21+
})
22+
}
23+
24+
export function addRole(data) {
25+
return request({
26+
url: '/roles',
27+
method: 'post',
28+
data
29+
})
30+
}
31+
32+
export function updateRole(key, data) {
33+
return request({
34+
url: `/roles/${key}`,
35+
method: 'put',
36+
data
37+
})
38+
}

‎src/components/HeaderSearch/index.vue

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,19 @@ export default {
3333
}
3434
},
3535
computed: {
36-
routers() {
37-
return this.$store.getters.permission_routers
36+
routes() {
37+
return this.$store.getters.permission_routes
3838
},
3939
lang() {
4040
return this.$store.getters.language
4141
}
4242
},
4343
watch: {
4444
lang() {
45-
this.searchPool = this.generateRouters(this.routers)
45+
this.searchPool = this.generateRoutes(this.routes)
4646
},
47-
routers() {
48-
this.searchPool = this.generateRouters(this.routers)
47+
routes() {
48+
this.searchPool = this.generateRoutes(this.routes)
4949
},
5050
searchPool(list) {
5151
this.initFuse(list)
@@ -59,7 +59,7 @@ export default {
5959
}
6060
},
6161
mounted() {
62-
this.searchPool = this.generateRouters(this.routers)
62+
this.searchPool = this.generateRoutes(this.routes)
6363
},
6464
methods: {
6565
click() {
@@ -100,10 +100,10 @@ export default {
100100
},
101101
// Filter out the routes that can be displayed in the sidebar
102102
// And generate the internationalized title
103-
generateRouters(routers, basePath = '/', prefixTitle = []) {
103+
generateRoutes(routes, basePath = '/', prefixTitle = []) {
104104
let res = []
105105
106-
for (const router of routers) {
106+
for (const router of routes) {
107107
// skip hidden router
108108
if (router.hidden) { continue }
109109
@@ -125,11 +125,11 @@ export default {
125125
}
126126
}
127127
128-
// recursive child routers
128+
// recursive child routes
129129
if (router.children) {
130-
const tempRouters = this.generateRouters(router.children, data.path, data.title)
131-
if (tempRouters.length >= 1) {
132-
res = [...res, ...tempRouters]
130+
const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
131+
if (tempRoutes.length >= 1) {
132+
res = [...res, ...tempRoutes]
133133
}
134134
}
135135
}

‎src/lang/en.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export default {
66
guide: 'Guide',
77
permission: 'Permission',
88
pagePermission: 'Page Permission',
9+
rolePermission: 'Role Permission',
910
directivePermission: 'Directive Permission',
1011
icons: 'Icons',
1112
components: 'Components',
@@ -86,9 +87,14 @@ export default {
8687
github: 'Github Repository'
8788
},
8889
permission: {
90+
addRole: 'New Role',
91+
editPermission: 'Edit Permission',
8992
roles: 'Your roles',
9093
switchRoles: 'Switch roles',
91-
tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
94+
tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
95+
delete: 'Delete',
96+
confirm: 'Confirm',
97+
cancel: 'Cancel'
9298
},
9399
guide: {
94100
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',

‎src/lang/es.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default {
55
documentation: 'Documentación',
66
guide: 'Guía',
77
permission: 'Permisos',
8+
rolePermission: 'Permisos de rol',
89
pagePermission: 'Permisos de la página',
910
directivePermission: 'Permisos de la directiva',
1011
icons: 'Iconos',
@@ -86,9 +87,14 @@ export default {
8687
github: 'Repositorio Github'
8788
},
8889
permission: {
90+
addRole: 'Nuevo rol',
91+
editPermission: 'Permiso de edición',
8992
roles: 'Tus permisos',
9093
switchRoles: 'Cambiar permisos',
91-
tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
94+
tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
95+
delete: 'Borrar',
96+
confirm: 'Confirmar',
97+
cancel: 'Cancelar'
9298
},
9399
guide: {
94100
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',

‎src/lang/zh.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default {
55
documentation: '文档',
66
guide: '引导页',
77
permission: '权限测试页',
8+
rolePermission: '角色权限',
89
pagePermission: '页面权限',
910
directivePermission: '指令权限',
1011
icons: '图标',
@@ -86,9 +87,14 @@ export default {
8687
github: 'Github 地址'
8788
},
8889
permission: {
90+
addRole: '新增角色',
91+
editPermission: '编辑权限',
8992
roles: '你的权限',
9093
switchRoles: '切换权限',
91-
tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。'
94+
tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
95+
delete: '删除',
96+
confirm: '确定',
97+
cancel: '取消'
9298
},
9399
guide: {
94100
description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',

‎src/mock/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import loginAPI from './login'
33
import articleAPI from './article'
44
import remoteSearchAPI from './remoteSearch'
55
import transactionAPI from './transaction'
6+
import roleAPI from './role'
67

78
// 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
89
// https://github.com/nuysoft/Mock/issues/300
@@ -23,6 +24,13 @@ Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
2324
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
2425
Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
2526

27+
// 角色相关
28+
Mock.mock(/\/routes/, 'get', roleAPI.getRoutes)
29+
Mock.mock(/\/roles/, 'get', roleAPI.getRoles)
30+
Mock.mock(/\/roles$/, 'post', roleAPI.addRole)
31+
Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'put', roleAPI.updateRole)
32+
Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'delete', roleAPI.deleteRole)
33+
2634
// 文章相关
2735
Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
2836
Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)

‎src/mock/role.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import Mock from 'mockjs'
2+
import { deepClone } from '@/utils'
3+
import { filterAsyncRoutes } from '@/store/modules/permission'
4+
import { asyncRoutes, constantRoutes } from '@/router'
5+
6+
const routes = deepClone([...constantRoutes, ...asyncRoutes])
7+
8+
const roles = [
9+
{
10+
key: 'admin',
11+
name: 'admin',
12+
description: 'Super Administrator. Have access to view all pages.',
13+
routes: routes
14+
},
15+
{
16+
key: 'editor',
17+
name: 'editor',
18+
description: 'Normal Editor. Can see all pages except permission page',
19+
routes: filterAsyncRoutes(routes, ['editor'])
20+
},
21+
{
22+
key: 'visitor',
23+
name: 'visitor',
24+
description: 'Just a visitor. Can only see the home page and the document page',
25+
routes: [{
26+
path: '',
27+
redirect: 'dashboard',
28+
children: [
29+
{
30+
path: 'dashboard',
31+
name: 'Dashboard',
32+
meta: { title: 'dashboard', icon: 'dashboard' }
33+
}
34+
]
35+
}]
36+
}
37+
]
38+
39+
export default {
40+
getRoutes() {
41+
return routes
42+
},
43+
getRoles() {
44+
return roles
45+
},
46+
addRole() {
47+
return Mock.mock('@integer(300, 5000)')
48+
},
49+
updateRole() {
50+
const res = {
51+
data: 'success'
52+
}
53+
return res
54+
},
55+
deleteRole() {
56+
const res = {
57+
data: 'success'
58+
}
59+
return res
60+
}
61+
}

‎src/permission.js

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,49 @@ import router from './router'
22
import store from './store'
33
import { Message } from 'element-ui'
44
import NProgress from 'nprogress' // progress bar
5-
import 'nprogress/nprogress.css'// progress bar style
6-
import { getToken } from '@/utils/auth' // getToken from cookie
5+
import 'nprogress/nprogress.css' // progress bar style
6+
import { getToken } from '@/utils/auth' // get token from cookie
77

8-
NProgress.configure({ showSpinner: false })// NProgress Configuration
8+
NProgress.configure({ showSpinner: false }) // NProgress Configuration
99

1010
// permission judge function
1111
function hasPermission(roles, permissionRoles) {
12-
if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
12+
if (roles.includes('admin')) return true // admin permission passed directly
1313
if (!permissionRoles) return true
1414
return roles.some(role => permissionRoles.indexOf(role) >= 0)
1515
}
1616

17-
const whiteList = ['/login', '/auth-redirect']// no redirect whitelist
17+
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
1818

1919
router.beforeEach((to, from, next) => {
2020
NProgress.start() // start progress bar
21-
if (getToken()) { // determine if there has token
21+
if (getToken()) {
22+
// determine if there has token
23+
2224
/* has token*/
2325
if (to.path === '/login') {
2426
next({ path: '/' })
2527
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
2628
} else {
27-
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
28-
store.dispatch('GetUserInfo').then(res => { // 拉取user_info
29-
const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
30-
store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
31-
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
32-
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
29+
if (store.getters.roles.length === 0) {
30+
// 判断当前用户是否已拉取完user_info信息
31+
store
32+
.dispatch('GetUserInfo')
33+
.then(res => {
34+
// 拉取user_info
35+
const roles = res.data.roles // note: roles must be a object array! such as: [{id: '1', name: 'editor'}, {id: '2', name: 'developer'}]
36+
store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
37+
// 根据roles权限生成可访问的路由表
38+
router.addRoutes(accessRoutes) // 动态添加可访问路由表
39+
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
40+
})
3341
})
34-
}).catch((err) => {
35-
store.dispatch('FedLogOut').then(() => {
36-
Message.error(err)
37-
next({ path: '/' })
42+
.catch(err => {
43+
store.dispatch('FedLogOut').then(() => {
44+
Message.error(err)
45+
next({ path: '/' })
46+
})
3847
})
39-
})
4048
} else {
4149
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
4250
if (hasPermission(store.getters.roles, to.meta.roles)) {
@@ -49,7 +57,8 @@ router.beforeEach((to, from, next) => {
4957
}
5058
} else {
5159
/* has no token*/
52-
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
60+
if (whiteList.indexOf(to.path) !== -1) {
61+
// 在免登录白名单，直接进入
5362
next()
5463
} else {
5564
next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页

‎src/router/index.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import nestedRouter from './modules/nested'
3333
affix: true if true, the tag will affix in the tags-view
3434
}
3535
**/
36-
export const constantRouterMap = [
36+
export const constantRoutes = [
3737
{
3838
path: '/redirect',
3939
component: Layout,
@@ -81,7 +81,6 @@ export const constantRouterMap = [
8181
{
8282
path: '/documentation',
8383
component: Layout,
84-
redirect: '/documentation/index',
8584
children: [
8685
{
8786
path: 'index',
@@ -109,10 +108,10 @@ export const constantRouterMap = [
109108
export default new Router({
110109
// mode: 'history', // require service support
111110
scrollBehavior: () => ({ y: 0 }),
112-
routes: constantRouterMap
111+
routes: constantRoutes
113112
})
114113

115-
export const asyncRouterMap = [
114+
export const asyncRoutes = [
116115
{
117116
path: '/permission',
118117
component: Layout,
@@ -141,6 +140,15 @@ export const asyncRouterMap = [
141140
title: 'directivePermission'
142141
// if do not set roles, means: this page does not require permission
143142
}
143+
},
144+
{
145+
path: 'role',
146+
component: () => import('@/views/permission/role'),
147+
name: 'RolePermission',
148+
meta: {
149+
title: 'rolePermission',
150+
roles: ['admin']
151+
}
144152
}
145153
]
146154
},

‎src/store/getters.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const getters = {
1212
status: state => state.user.status,
1313
roles: state => state.user.roles,
1414
setting: state => state.user.setting,
15-
permission_routers: state => state.permission.routers,
16-
addRouters: state => state.permission.addRouters,
15+
permission_routes: state => state.permission.routes,
16+
addRoutes: state => state.permission.addRoutes,
1717
errorLogs: state => state.errorLog.logs
1818
}
1919
export default getters

0 commit comments

Comments
 (0)