知识的殿堂Appearance
所属模块
设置中心-权限管理
配置文件路径
/src/components/settings/views/auth/config.js
权限分类
BaseAuth
| 权限名称 | key | code |
|---|---|---|
| 查看 | view | 1 << 1 |
| 编辑 | edit | 1 << 2 |
| 删除 | delete | 1 << 3 |
各模块权限清单
| 模块名称 | moduleName | 可供编辑的权限 |
|---|---|---|
| 首页 | home | view |
| 联系人管理 | contact_management | BaseAuth |
| 智能标签 | contact_segment | view |
| workflow | campaign_workflow | view |
| 会议 | campaign_conference | view |
| 微信看板 | platform_wechat_kanban | view |
| 用户管理 | platform_wechat_users | view | edit |
| 消息管理 | platform_wechat_message | view | edit |
| 群发 | platform_wechat_groupSend | view | edit |
| 批量互动 | platform_wechat_batchInteraction | view | edit |
| 自定义菜单 | platform_wechat_selfMenu | BaseAuth |
| 自动回复 | platform_wechat_reply | BaseAuth |
| 素材管理 | platform_wechat_material | BaseAuth |
| 小程序看板 | platform_miniprogram_kanban | view |
| 小程序访客 | platform_miniprogram_visitor | view |
| 邮件 | platform_mail | view |
| 短信 | platform_message | view |
| 企业微信 | platform_ww | view |
| 数据统计 | platform_callCenter_dashboard | view |
| 管理中心 | platform_callCenter_config | view |
| 通话记录 | platform_callCenter_callRecord | view |
| 回电计划 | platform_callCenter_callSchedule | view |
| 问卷 | material_questionnaire | view |
| 自定义微站 | material_minisite_custom | view |
| 模板微站 | material_minisite_template | view |
| CMS | material_minisite_dataPool | view |
| 着陆页 | material_landingpage | view |
| 直播 | material_webinar | view |
| 全员营销 | material_fullMarketing | view |
| 抽奖 | market_luckydraw | view |
| 数据看板 | market_membercenter_dashboard | view |
| 所有会员 | market_membercenter_management | view |
| 会员审核 | market_membercenter_examine | view |
| 订单管理 | market_membercenter_orders | view |
| 礼品管理 | market_membercenter_rules | view |
| 会员体系 | market_membercenter_settings | view |
| 通知设置 | market_membercenter_notification | view |
| 裂变海报 | market_poster | view |
| 编辑小程序 | market_miniapp_Edit | view |
| 资料中心 | market_miniapp_FileStorage | view |
| 员工管理 | market_miniapp_Management | view |
| 版本管理 | market_miniapp_Versions | view |
| 访客管理 | market_miniapp_Visitor | view |
| 业务流 | market_ticket | view |
| 礼品库 | market_gift | view |
| 证书 | market_certificate | view |
| 签到码 | market_signInCode | view |
| 排行榜 | market_ranking | view |
| 机器人 | market_robot | view |
| 视频列表 | market_learning_videos | view |
| 课程管理 | market_learning_courses | view |
| 数据统计 | market_learning_dashboard | view |
| 图片管理 | resource_image | BaseAuth |
| 文档管理 | resource_document | BaseAuth |
| 视频管理 | resource_video | BaseAuth |
| 音频管理 | resource_audio | BaseAuth |
| 员工管理 | settings_staff | view |
| 应用账密 | settings_wesite-account | view |
| 通知设置 | settings_notification | view |
| 服务配置 | settings_intergration | view |
| 系统标签 | system-tag | BaseAuth |
系统角色
- 部门管理员
- 部门成员
模块访问权限配置
- 配置常量：AuthMap
- 数据结构
js
{
platform: {
name: '营销平台',
children: {
wechat: {
name: '微信公众号',
children: {
kanban: {
name: '微信看板',
...BaseAuth(),
},
...some code
}
},
miniprogram: {
name: '微信小程序',
...BaseAuth()
},
...some code
}
},
...some code
}```
- 匹配规则：!!#ff0000 键名需要一一包含在**route.path**里!!
⚠️Header菜单栏路由需要与模块权限名称匹配，否则会出现展示异常
- 新增配置代码示例
```js
// 包含platform&wechat&groupSend的path可以配置查看，例如path: '/platform/wechat/groupSend'
platform: {
name: '营销平台',
children: {
wechat: {
name: '微信公众号',
children: {
...some code
groupSend: {
name: '群发',
...BaseAuth(),
}
...some code
// 包含contact且包含management的path可以配置基础规则（查看/编辑/删除）,例如path: '/contact/management/leads'
contact: {
name: '联系人',
children: {
management: {
name: '联系人管理',
...BaseAuth()
}
}
}模块内的权限调用和判断
路由配置（默认为查看权限）
import { Edit } from '@/components/settings/views/auth/config'
...
meta: {
title: '新建互动',
menuTitle: '新建互动',
hidden: false,
// 编辑权限才能访问
auth: Edit.value
}忽略权限校验
js
meta:{
...
skip:true
}403前的重定向尝试
当某个模块包含在其他模块内且它有自己的权限配置时，可进行重定向，一般配置在菜单栏导向的模块
js
meta:{
...
// 访问微站模块时如果为403结果，重定向到authAttempts中第一个能访问的模块
authAttempts: ['/material/minisite/dataPool','/material/minisite/template']
}vue指令：v-auth
- 功能：直接调用指令展示/隐藏元素/组件
- 参数
- arg:
- value:
html
<a-button v-auth:delete="module" type="danger">删除</a-button>vue指令：v-auth-wrapper
- 功能：直接调用指令禁用容器事件并降低不透明度
- 参数
- arg:
- value:
html
<div v-auth-wrapper:edit="module">
...
</div>方法调用：hasAuth
- 功能：调用方法判断是否具有某个模块的某项权限
- 参数 hasAuth('{BaseAuth.key}', {moduleName})
js
import { hasAuth } from '@/directives/auth'
hasAuth('edit', this.module)组件容器(适用于单一页面展示的页面含有不同权限，比如资源管理)
vue
//template
<PageErrorVue :is-allowed="isPathAllowed('image')" :show-button="false">
//..这里面放要展示的内容
</PageErrorVue>
//script
import { isPathAllowed } from '@/permission'
import PageErrorVue from '@/components/exceptions/PageError.vue'module名称定义和引用方式
为了代码的可维护和一致性，先规定配置module的方式
- 定义 在各模块的路由文件上方配置权限名称，以微信模块举例
js
// router/platform.js
export const WechatUsersModule = 'platform_wechat_users'
export const WechatMessageModule = 'platform_wechat_message'
export const WechatGroupSendModule = 'platform_wechat_groupSend'
export const WechatBatchInteractionModule = 'platform_wechat_batchInteraction'
export const WechatSelfMenuModule = 'platform_wechat_selfMenu'
export const WechatReplyModule = 'platform_wechat_reply'
export const WechatMaterialModule = 'platform_wechat_material'- 本模块组件引用
js
// router/platform.js
{
path: '/platform/wechat/users/management',
...省略部分代码
meta: {
...省略部分代码
// 在此处注入，组件通过route.meta.module引用
module: WechatUsersModule
}
}- 其他组件引用
js
import {WechatUsersModule} from '@/router/routers/platform'全局无权限错误提示
参数：(403,{BaseAuth.key}, {moduleName})
js
this.$requestWarning(403, 'view', 'resource_image')