At present, several pages related to permission control have been made in the project, including three pages, role management, resource management and role permission.
Role management
This page is mainly for cruD of characters, which is relatively simple and won’t be covered.
Resource management
This page is actually the configuration of the menu, that is, the setting of the route, I use the idea of component reuse, is to add and update the page with the same component, before enabling the judgment is to add or update.
Vue code
- new
src\views\pre\perm\edit.vueThe file, which is actually the component that the Edit button refers to, where you can set what you’re going to do is edit, and then passscopeGet the data
<template>
<div>
<el-button size="mini" type="success" @click="to"</el-button> <eForm ref="form" :menus="menus" :sup_this="sup_this" :is-add="false"/>
</div>
</template>
<script>
import eForm from './form'
export default {
components: { eForm },
props: {
data: {
type: Object,
required: true
},
sup_this: {
type: Object,
required: true
},
menus: {
type: Array,
required: true
}
},
methods: {
to() {
const _this = this.$refs.form
_this.roleIds = []
_this.form = { per_id: this.data.per_id, per_component: this.data.per_component, per_name: this.data.per_name, per_sort: this.data.per_sort,
per_parent_id: this.data.per_parent_id, per_resource: this.data.per_resource, per_icon: this.data.per_icon, per_describe: this.data.per_describe }
_this.dialog = true
}
}
}
</script>
<style scoped>
div{
display: inline-block;
margin-right: 3px;
}
</style>
Copy the code2. Create a SRC \views\pre\perm\form.vue file
<template>
<el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? 'Add Menu' : 'Edit Menu '" width="600px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="Menu icon">
<el-popover
placement="bottom-start"
width="460"
trigger="click"
@show="$refs['iconSelect'].reset()">
<el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="Click on the select icon" readonly>
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px; width: 16px;" />
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
</el-input>
</el-popover>
</el-form-item>
<el-form-item label="Menu name" prop="per_name">
<el-input v-model="form.per_name" placeholder="Name" style="width: 460px;"/>
</el-form-item>
<el-form-item label="Menu sort" prop="per_sort">
<el-input v-model.number="form.per_sort" placeholder="The smaller the serial number, the more advanced it is." style="width: 460px;"/>
</el-form-item>
<el-form-item label="URL">
<el-input v-model="form.per_resource" placeholder="Component path" style="width: 460px;"/>
</el-form-item>
<el-form-item label="Component path">
<el-input v-model="form.per_component" placeholder="Component path" style="width: 460px;"/>
</el-form-item>
<el-form-item label="Superior menu">
<treeselect v-model="form.per_parent_id" :options="menus" style="width: 460px;" placeholder="Select parent category" />
</el-form-item>
<el-form-item label="Menu Description" prop="per_describe">
<el-input v-model.number="form.per_describe" placeholder="Please fill in the menu description." style="width: 460px;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel"</el-button> <el-button :loading="loading" type="primary" @click="doSubmit"</el-button> </div> </el-dialog> </template> <script> // import the component import Treeselect from'@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { add, edit } from '@/api/menu'
export default {
components: { Treeselect },
props: {
menus: {
type: Array,
required: true
},
isAdd: {
type: Boolean,
required: true
},
sup_this: {
type: Object,
default: null
}
},
data() {
return {
loading: false, dialog: false,
form: { per_id: null, per_name: ' ', per_sort: 999, per_resource: ' ', per_component: ' ', per_parent_id: 0, per_icon: ' ', per_describe: ' ' },
roleIds: [],
rules: {
per_name: [
{ required: true, message: 'Please enter a name', trigger: 'blur' }
],
per_sort: [
{ required: true, message: 'Please enter the serial number', trigger: 'blur'.type: 'number' }
]
}
}
},
methods: {
cancel() {
this.resetForm()
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
this.form.roles = []
const _this = this
this.roleIds.forEach(function(data, index) {
const role = { id: data }
_this.form.roles.push(role)
})
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
} else {
return false}})},doAdd() {
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: 'Added successfully'.type: 'success',
duration: 2500
})
this.loading = false
this.$parent.$parent.init()
this.$parent.$parent.getMenus()
}).catch(error => {
this.loading = false
this.$message({
showClose: true,
message: error,
type: 'error'})})},doEdit() {
edit(this.form).then(res => {
this.resetForm()
this.$notify({
title: 'Modified successfully'.type: 'success',
duration: 2500
})
this.loading = false
this.sup_this.init()
this.sup_this.getMenus()
}).catch(err => {
this.loading = false
console.log(err.msg)
})
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
this.form = { name: ' ', sort: 999, path: ' ', component: ' ', iframe: 'false', pid: 0, icon: ' ' }
this.roleIds = []
},
selected(name) {
this.form.icon = name
}
}
}
</script>
<style scoped>
</style>
Copy the codeThis generic component eliminates the need to reference both components in your code.
Role authorization
The control object of the front end of my project is mainly the routing of the page, which can dynamically set the menus that the role can display. Using the el-tree component… Won’t the CSS… The page is ugly, no offense… System administrator page
Dynamic configuration
The tree component in this page is actually adding, deleting, modifying and checking the RolePermission component in our database. The general process is as follows:
- Get the user’s route set by role ID, and then pass
el-treeComponent to render if selected - The idea of updating is to delete first
RolePermissionAll the data of this role ID in the table will be added in batches according to the ID set we get at the front end.
A small problem
Because the el-Tree component gets the ID of the parent node given by us in the background, it will directly select all the child nodes, but this obviously does not meet our requirements. The current solution is to remove the association between the parent node and the child node, so the problem is that when we configure ourselves, we select the parent node, and the child nodes need to be selected one by one. I’m still trying to figure it out…