43 lines
1.7 KiB
Markdown
43 lines
1.7 KiB
Markdown
|
# 开发说明
|
|||
|
|
|
|||
|
|
## 1.v-permissions 指令：页面组件权限卡控（比如用于页面按钮）
|
|||
|
|
|
|||
|
|
#### 应用要求
|
|||
|
|
|
|||
|
|
1）表数据维护：
|
|||
|
|
-- 维护页面组件（如按钮）字典：tbl_infrastructure_resource、tbl_infrastructure_verb
|
|||
|
|
-- 维护页面组件角色权限：tbl_infrastructure_permission
|
|||
|
|
2）页面权限控制：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
<el-button
|
|||
|
|
v-permissions="{ verbName: 'add', resourceName: $options.name }"
|
|||
|
|
@click="handleAdd"
|
|||
|
|
>
|
|||
|
|
</el-button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---- $options.name：vue页面的name，要求tbl_infrastructure_menu表中name字段唯一,且与tbl_infrastructure_resource表中的name字段对应。
|
|||
|
|
|
|||
|
|
3）整个逻辑说明：
|
|||
|
|
-- 登录时从接口获取permission，存起来。
|
|||
|
|
-- 页面组件渲染时，通过v-permissions指令,判断当前用户是否有权限，如果无权限，则移除组件
|
|||
|
|
|
|||
|
|
## 2.获取用户信息
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { useAclStore } from './acl'
|
|||
|
|
|
|||
|
|
const aclStore = useAclStore()
|
|||
|
|
const userId = aclStore.getUserId //获取用户id，1
|
|||
|
|
const userAccount = aclStore.getUserAccount //获取用户账号,admin
|
|||
|
|
const userName = aclStore.getUserName //获取用户名,系统管理员
|
|||
|
|
const role = aclStore.getRole //获取角色
|
|||
|
|
const userResourceVerbs = aclStore.getUserResourceVerbs //获取用户路由下按钮
|
|||
|
|
const isadmin = aclStore.getAdmin //获取是否管理员，true/false
|
|||
|
|
const permission = aclStore.getPermission //获取菜单（暂未存）
|
|||
|
|
const loginDevice = aclStore.getLoginDevice //获取登录设备（暂未存）
|
|||
|
|
const deptId = aclStore.getDeptId //获取部门id（已实现，暂未看到接口数据）
|
|||
|
|
const deptName = aclStore.getDeptName //获取部门名称（已实现，暂未看到接口数据）
|
|||
|
|
```
|