Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
圆滚滚核心
vue-element-admin
提交
597df484
V
vue-element-admin
项目概览
圆滚滚核心
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
597df484
编写于
5月 08, 2018
作者:
花
花裤衩
提交者:
GitHub
5月 08, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feature[permission]: add v-permission (#653)
上级
1e103cf1
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
163 addition
and
6 deletion
+163
-6
src/directive/permission/index.js
src/directive/permission/index.js
+13
-0
src/directive/permission/permission.js
src/directive/permission/permission.js
+23
-0
src/lang/en.js
src/lang/en.js
+2
-0
src/lang/zh.js
src/lang/zh.js
+2
-0
src/router/index.js
src/router/index.js
+18
-6
src/views/permission/components/SwitchRoles.vue
src/views/permission/components/SwitchRoles.vue
+30
-0
src/views/permission/directive.vue
src/views/permission/directive.vue
+56
-0
src/views/permission/page.vue
src/views/permission/page.vue
+19
-0
未找到文件。
src/directive/permission/index.js
0 → 100644
浏览文件 @
597df484
import
permission
from
'
./permission
'
const
install
=
function
(
Vue
)
{
Vue
.
directive
(
'
permission
'
,
permission
)
}
if
(
window
.
Vue
)
{
window
[
'
permission
'
]
=
permission
Vue
.
use
(
install
);
// eslint-disable-line
}
permission
.
install
=
install
export
default
permission
src/directive/permission/permission.js
0 → 100644
浏览文件 @
597df484
import
store
from
'
@/store
'
export
default
{
inserted
(
el
,
binding
,
vnode
)
{
const
{
value
}
=
binding
const
roles
=
store
.
getters
&&
store
.
getters
.
roles
if
(
value
&&
value
instanceof
Array
&&
value
.
length
>
0
)
{
const
permissionRoles
=
value
const
hasPermission
=
roles
.
some
(
role
=>
{
return
permissionRoles
.
includes
(
role
)
})
if
(
!
hasPermission
)
{
el
.
parentNode
&&
el
.
parentNode
.
removeChild
(
el
)
}
}
else
{
throw
new
Error
(
`need roles! Like v-permission="['admin','editor']"`
)
}
}
}
src/lang/en.js
浏览文件 @
597df484
...
...
@@ -4,6 +4,8 @@ export default {
introduction
:
'
Introduction
'
,
documentation
:
'
Documentation
'
,
permission
:
'
Permission
'
,
pagePermission
:
'
Page Permission
'
,
directivePermission
:
'
Directive Permission
'
,
icons
:
'
Icons
'
,
components
:
'
Components
'
,
componentIndex
:
'
Introduction
'
,
...
...
src/lang/zh.js
浏览文件 @
597df484
...
...
@@ -4,6 +4,8 @@ export default {
introduction
:
'
简述
'
,
documentation
:
'
文档
'
,
permission
:
'
权限测试页
'
,
pagePermission
:
'
页面权限
'
,
directivePermission
:
'
指令权限
'
,
icons
:
'
图标
'
,
components
:
'
组件
'
,
componentIndex
:
'
介绍
'
,
...
...
src/router/index.js
浏览文件 @
597df484
...
...
@@ -67,16 +67,28 @@ export const asyncRouterMap = [
path
:
'
/permission
'
,
component
:
Layout
,
redirect
:
'
/permission/index
'
,
meta
:
{
roles
:
[
'
admin
'
]
},
// you can set roles in root nav
alwaysShow
:
true
,
// will always show the root menu
meta
:
{
title
:
'
permission
'
,
icon
:
'
lock
'
,
roles
:
[
'
admin
'
,
'
editor
'
]
// you can set roles in root nav
},
children
:
[{
path
:
'
index
'
,
component
:
_import
(
'
permission/
index
'
),
name
:
'
permission
'
,
path
:
'
page
'
,
component
:
_import
(
'
permission/
page
'
),
name
:
'
p
ageP
ermission
'
,
meta
:
{
title
:
'
permission
'
,
icon
:
'
lock
'
,
title
:
'
pagePermission
'
,
roles
:
[
'
admin
'
]
// or you can only set roles in sub nav
}
},
{
path
:
'
directive
'
,
component
:
_import
(
'
permission/directive
'
),
name
:
'
directivePermission
'
,
meta
:
{
title
:
'
directivePermission
'
// if do not set roles, means: this page does not require permission
}
}]
},
...
...
src/views/permission/
index
.vue
→
src/views/permission/
components/SwitchRoles
.vue
浏览文件 @
597df484
<
template
>
<div
class=
"app-container"
>
<div>
<div
style=
"margin-bottom:15px;"
>
{{
$t
(
'
permission.roles
'
)
}}
:
{{
roles
}}
</div>
{{
$t
(
'
permission.switchRoles
'
)
}}
:
<el-radio-group
v-model=
"switchRoles"
>
<el-radio-button
label=
"editor"
></el-radio-button>
<el-radio-button
label=
"admin"
></el-radio-button>
</el-radio-group>
</div>
</
template
>
<
script
>
import
{
mapGetters
}
from
'
vuex
'
export
default
{
name
:
'
permission
'
,
data
()
{
return
{
switchRoles
:
''
}
},
export
default
{
computed
:
{
...
mapGetters
([
'
roles
'
])
},
watch
:
{
switchRoles
(
val
)
{
this
.
$store
.
dispatch
(
'
ChangeRoles
'
,
val
).
then
(()
=>
{
this
.
$router
.
push
({
path
:
'
/permission/index?
'
+
+
new
Date
()
})
})
roles
()
{
return
this
.
$store
.
getters
.
roles
},
switchRoles
:
{
get
()
{
return
this
.
roles
[
0
]
},
set
(
val
)
{
this
.
$store
.
dispatch
(
'
ChangeRoles
'
,
val
).
then
(()
=>
{
this
.
$emit
(
'
change
'
)
})
}
}
}
}
...
...
src/views/permission/directive.vue
0 → 100644
浏览文件 @
597df484
<
template
>
<div
class=
"app-container"
>
<switch-roles
@
change=
"handleRolesChange"
/>
<div
:key=
"key"
style=
"margin-top:30px;"
>
<span
v-permission=
"['admin']"
class=
"permission-alert"
>
Only
<el-tag
class=
"permission-tag"
size=
"small"
>
admin
</el-tag>
can see this
</span>
<span
v-permission=
"['editor']"
class=
"permission-alert"
>
Only
<el-tag
class=
"permission-tag"
size=
"small"
>
editor
</el-tag>
can see this
</span>
<span
v-permission=
"[]"
class=
"permission-alert"
>
Both
<el-tag
class=
"permission-tag"
size=
"small"
>
admin
</el-tag>
and
<el-tag
class=
"permission-tag"
size=
"small"
>
editor
</el-tag>
can see this
</span>
</div>
</div>
</
template
>
<
script
>
import
permission
from
'
@/directive/permission/index.js
'
// 权限判断指令
import
SwitchRoles
from
'
./components/SwitchRoles
'
export
default
{
name
:
'
directivePermission
'
,
components
:
{
SwitchRoles
},
directives
:
{
permission
},
data
()
{
return
{
key
:
1
// 为了能每次切换权限的时候重新初始化指令
}
},
methods
:
{
handleRolesChange
()
{
this
.
key
++
}
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.app-container
{
/
deep
/
.permission-alert
{
width
:
320px
;
margin-top
:
30px
;
background-color
:
#f0f9eb
;
color
:
#67c23a
;
padding
:
8px
16px
;
border-radius
:
4px
;
display
:
block
;
}
/
deep
/
.permission-tag
{
background-color
:
#ecf5ff
;
}
}
</
style
>
src/views/permission/page.vue
0 → 100644
浏览文件 @
597df484
<
template
>
<div
class=
"app-container"
>
<switch-roles
@
change=
"handleRolesChange"
/>
</div>
</
template
>
<
script
>
import
SwitchRoles
from
'
./components/SwitchRoles
'
export
default
{
name
:
'
pagePermission
'
,
components
:
{
SwitchRoles
},
methods
:
{
handleRolesChange
()
{
this
.
$router
.
push
({
path
:
'
/permission/index?
'
+
+
new
Date
()
})
}
}
}
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录