序文
1.権限管理の設計思想
私たちのプロジェクトは、役割ベースの権限割り当てソリューションである RBAC 権限モデル RBAC (Role-Based Access control) を使用します. 従来のソリューションと比較して、RBAC は中間層の Role (役割) を提供し、その権限モデルは次のようになります. :
RBAC はユーザーと権限ポイントの分離を実現します. ユーザーに権限を設定したい場合, ユーザーに対応する役割を設定するだけでよく, 役割には対応する権限があります. このように, 権限の割り当てと設計最小限で効率的です.ユーザーから権限を撤回したい場合は、ロールを撤回するだけで済みます.
2. 従業員に役割を割り当てる
2.1 役割分担のポップアップ効果図
2.1 新しい割り当てロール ダイアログ コンポーネントを作成する
ユーザーとロールは 1 対多の関係にあり、つまり、ユーザーは複数のロールを持つことができます.
src/views/employees/components/ ディレクトリに新しい assign-role.vue コンポーネントを作成します:
<template>
<el-dialog title="分配角色" :visible="showRoleDialog">
<!-- el-checkbox-group选中的是 当前用户所拥有的角色 需要绑定 当前用户拥有的角色-->
<el-checkbox-group>
<!-- 选项 -->
</el-checkbox-group>
<el-row slot="footer" type="flex" justify="center">
<el-col :span="6">
<el-button type="primary" size="small">确定</el-button>
<el-button size="small">取消</el-button>
</el-col>
</el-row>
</el-dialog>
</template>
<script>
export default {
props: {
showRoleDialog: {
type: Boolean,
default: false
}
}
}
</script>
2.2 ロール一覧を取得する
次のコードを src/views/employees/components/assign-role.vue に追加します。
<!-- 分配角色 -->
<el-checkbox-group v-model="roleIds">
<el-checkbox v-for="item in list" :key="item.id" :label="item.id">
{
{
item.name
}}
</el-checkbox>
</el-checkbox-group>
import {
getRoleList } from '@/api/setting'
export default {
props: {
showRoleDialog: {
type: Boolean,
default: false
},
userId: {
type: String,
default: null
}
},
data() {
return {
list: [], // 角色列表
}
},
created() {
this.getRoleList()
},
methods: {
// 获取所有角色
async getRoleList() {
const {
rows } = await getRoleList()
this.list = rows
}
}
}
2.3 現在のユーザーのロール情報を取得する
まず、src/views/employees/components/assign-role.vue でロール情報を取得するメソッドを定義します。
import {
getUserDetailById } from '@/api/user'
async getUserDetailById(id) {
const {
roleIds } = await getUserDetailById(id)
this.roleIds = roleIds // 赋值本用户的角色
}
次に、src/views/employees/index.vue でサブコンポーネント メソッドを呼び出します。
<el-button type="text" size="small" @click="editRole(row.id)">角色</el-button>
<!-- 放置角色分配组件 -->
<assign-role ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
// 编辑角色
async editRole(id) {
this.userId = id // props传值 是异步的
await this.$refs.assignRole.getUserDetailById(id) // 父组件调用子组件方法
this.showRoleDialog = true
},
2.4 [OK] ボタンをクリックして、ユーザーにロールを割り当てます
まず、役割を割り当てるリクエストを src/api/employees.js にカプセル化します。
/** *
* 给用户分配角色
* ***/
export function assignRoles(data) {
return request({
url: '/sys/user/assignRoles',
data,
method: 'put'
})
}
次に、src/views/employees/components/assign-role.vue でボタン クリック イベントをバインドします。
<el-button type="primary" size="small" @click="btnOK">确定</el-button>
<el-button size="small" @click="btnCancel">取消</el-button>
async btnOK() {
await assignRoles({
id: this.userId, roleIds: this.roleIds })
// 关闭窗体
this.$emit('update:showRoleDialog', false)
},
//点击取消或关闭对话框时调用
btnCancel() {
this.roleIds = [] // 清空原来的数组
this.$emit('update:showRoleDialog', false)
}
3. 権利管理ページ
3.1 権利管理ページのレンダリング図
3.2 権利管理ページの基本レイアウト
src/views/permission/index.vue に次のコードを追加します。
<template>
<div class="dashboard-container">
<div class="app-container">
<!-- 靠右的按钮 -->
<page-tools>
<template v-slot:after>
<el-button type="primary" size="small">添加权限</el-button>
</template>
</page-tools>
<!-- 表格 -->
<el-table border>
<el-table-column align="center" label="名称" />
<el-table-column align="center" label="标识" />
<el-table-column align="center" label="描述" />
<el-table-column align="center" label="操作">
<template>
<el-button type="text">添加</el-button>
<el-button type="text">编辑</el-button>
<el-button type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
3.3 権利管理関連のリクエストをカプセル化する
src/api/permission.js に次のコードを追加します。
// 获取权限
export function getPermissionList(params) {
return request({
url: '/sys/permission',
params
})
}
// 新增权限
export function addPermission(data) {
return request({
url: '/sys/permission',
method: 'post',
data
})
}
// 更新权限
export function updatePermission(data) {
return request({
url: `/sys/permission/${
data.id}`,
method: 'put',
data
})
}
// 删除权限
export function delPermission(id) {
return request({
url: `/sys/permission/${
id}`,
method: 'delete'
})
}
// 获取权限详情
export function getPermissionDetail(id) {
return request({
url: `/sys/permission/${
id}`
})
}
3.4 許可データの取得
ツリー操作メソッドを使用して、リストを階層データに変換します. ここでは、ツリー構造を表示するために、el-table の行キー属性 id を構成する必要があります. src/views/permission.js に次のコードを追加します
:
<el-table :data="list" border="" row-key="id">
<el-table-column label="名称" prop="name" />
<el-table-column label="标识" prop="code" />
<el-table-column label="描述" prop="description" />
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button type="text" >添加</el-button>
<el-button type="text" >编辑</el-button>
<el-button type="text" >删除</el-button>
</template>
</el-table-column>
</el-table>
<script>
import {
getPermissionList } from '@/api/permission'
import {
transListToTreeData } from '@/utils'
export default {
data() {
return {
list: [],
}
},
created() {
this.getPermissionList()
},
methods: {
async getPermissionList() {
this.list = transListToTreeData(await getPermissionList(), '0')
}
}
}
</script>
3.5 権限の追加、編集、および削除
src/views/permission.js に新しい追加および編集権限ダイアログを作成します。
<!-- 靠右的按钮 -->
<page-tools>
<template v-slot:after>
<el-button type="primary" size="small" @click="addPermission(1, '0')">添加权限</el-button>
</template>
</page-tools>
<!-- 添加按钮只在 访问权的层级显示 当type==1 时才显示添加按钮 -->
<el-button v-if="row.type === 1" type="text" @click="addPermission(2, row.id)">添加</el-button>
<el-button type="text" @click="editPermission(row.id)">编辑</el-button>
<el-button type="text" @click="delPermission(row.id)">删除</el-button>
<!-- 放置一个弹层 用来编辑新增节点 -->
<el-dialog :title="`${showText}权限点`" :visible="showDialog" @close="btnCancel">
<!-- 表单 -->
<el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="权限名称" prop="name">
<el-input v-model="formData.name" style="width:90%" />
</el-form-item>
<el-form-item label="权限标识" prop="code">
<el-input v-model="formData.code" style="width:90%" />
</el-form-item>
<el-form-item label="权限描述">
<el-input v-model="formData.description" style="width:90%" />
</el-form-item>
<el-form-item label="开启">
<el-switch
v-model="formData.enVisible"
active-value="1"
inactive-value="0"
/>
</el-form-item>
</el-form>
<el-row slot="footer" type="flex" justify="center">
<el-col :span="6">
<el-button size="small" type="primary" @click="btnOK">确定</el-button>
<el-button size="small" @click="btnCancel">取消</el-button>
</el-col>
</el-row>
</el-dialog>
バインド データ:
import {
updatePermission, addPermission, getPermissionDetail, delPermission, getPermissionList } from '@/api/permission'
data() {
return {
list: [],
showDialog: false,
formData: {
name: '', // 名称
code: '', // 标识
description: '', // 描述
type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
pid: '', // 因为做的是树 需要知道添加到哪个节点下了
enVisible: '0' // 开启
},
rules: {
name: [{
required: true, message: '权限名称不能为空', trigger: 'blur' }],
code: [{
required: true, message: '权限标识不能为空', trigger: 'blur' }]
}}
},
computed: {
showText() {
return this.formData.id ? '编辑权限' : '新增权限'
}
},
methods: {
delPermission(id) {
this.$confirm('确认删除该权限点吗').then(() => {
return delPermission(id)
}).then(() => {
this.$message.success('删除成功')
// 重新拉取数据
this.getPermissionList()
})
},
addPermission(type, pid) {
// 访问权的type = 1 按钮操作的权type =2
// pid表示当前数据的父节点的标识
// 记录当前添加的类型和父标识
this.formData.type = type
this.formData.pid = pid
this.showDialog = true
},
async editPermission(id) {
this.formData = await getPermissionDetail(id)
this.showDialog = true
}
btnOK() {
this.$refs.permForm.validate().then(() => {
// 校验成功
if (this.formData.id) {
// 认为是编辑
return updatePermission(this.formData)
}
return addPermission(this.formData) // 新增接口
}).then(() => {
// 添加成功
this.$message.success('操作成功')
this.getPermissionList()
this.showDialog = false
})
},
btnCancel() {
// 重置数据
this.formData = {
name: '', // 名称
code: '', // 标识
description: '', // 描述
type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
pid: '', // 因为做的是树 需要知道添加到哪个节点下了
enVisible: '0' // 开启
}
// 移除校验
this.$refs.permForm.resetFields() // 移除校验
this.showDialog = false
},
}
4.役割に権限を割り当てる
4.1 権限付与の効果図
4.2 リクエストをカプセル化して権限を割り当てる
src/api/setting.js に次のコードを追加します。
// 给角色分配权限
export function assignPerm(data) {
return request({
url: '/sys/role/assignPrem',
method: 'put',
data
})
}
4.3 権限を割り当てるためのポップアップ ウィンドウを作成する
src/views/settings/index.vue にポップアップ ウィンドウの基本的なレイアウトを追加します。
<!-- 点击分配权限按钮 -->
<el-button size="small" type="success" @click="assignPerm(row.id)">分配权限</el-button>
<!-- 放置一个弹层 -->
<el-dialog title="分配权限" :visible="showPermDialog" @close="btnPermCancel">
<!-- 权限是一颗树 -->
<!-- 将数据绑定到组件上 -->
<!-- check-strictly 如果为true 那表示父子勾选时 不互相关联 如果为false就互相关联 -->
<!-- id作为唯一标识 -->
<el-tree
ref="permTree"
:data="permData"
:props="defaultProps"
:show-checkbox="true"
:check-strictly="true"
:default-expand-all="true"
:default-checked-keys="selectCheck"
node-key="id"
/>
<!-- 确定 取消 -->
<el-row slot="footer" type="flex" justify="center">
<el-col :span="6">
<el-button type="primary" size="small" @click="btnPermOK">确定</el-button>
<el-button size="small" @click="btnPermCancel">取消</el-button>
</el-col>
</el-row>
</el-dialog>
バインド データ:
import {
getRoleDetail, assignPerm } from '@/api/setting'
import {
transListToTreeData } from '@/utils'
import {
getPermissionList } from '@/api/permission'
data() {
return {
showPermDialog: false, // 控制分配权限弹层的显示或者隐藏
permData: [], // 接收权限数据
defaultProps: {
label: 'name'
}, // 定义显示字段的名称 和 子属性的字段名称
roleId: null, // 用来记录当前分配权限的id
selectCheck: [] // 用来记录当前的权限点的标识
}
},
methods: {
// 点击分配权限
// 获取权限点数据 在点击的时候调用 获取权限点数据
async assignPerm(id) {
this.permData = tranListToTreeData(await getPermissionList(), '0') // 转化list到树形数据
this.roleId = id
// 应该去获取 这个id的 权限点
// 有id 就可以 id应该先记录下来
const {
permIds } = await getRoleDetail(id) // permIds是当前角色所拥有的权限点数据
this.selectCheck = permIds // 将当前角色所拥有的权限id赋值
this.showPermDialog = true
},
async btnPermOK() {
// 调用el-tree的方法
await assignPerm({
permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId })
this.$message.success('分配权限成功')
this.showPermDialog = false
},
btnPermCancel() {
this.selectCheck = [] // 重置数据
this.showPermDialog = false
}
}