Elementuiadmin removes the default mock permission control settings
Generally, for projects separated from front-end and back-end, the front-end rarely calls tests through mock simulation data, because after the API comes out later, the structure may be modified, which is quite troublesome.
This article summarizes from practice and completely removes the default mock control.
1. Find the file and remove the loading of the mock
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
}
// before: require('./mock/') // Comment out this line}2. Find and comment out the relevant mock
// if (.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
// }Log in to the page and call the method under API/ directly.
First refer to login and reg, otherwise the user details interface will be called using the default login interface.
import { login, reg } from '@/api/user'Comment out the original login method, and after the call is successful, set the login token value into js-cookie
handleLogin() {
this.$(valid => {
if (valid) {
= true
login().then((res) => {
if (res && === 0 && && ) {
setToken()
this.$({ path: || '/', query: })
= false
}
}).catch(() => {
= false
})
// this.$('user/login', )
// .then(() => {
// this.$({ path: || '/', query: })
// = false
// })
// .catch(() => {
// = false
// })
} else {
('error submit!!')
return false
}
})
},4. After logging in, it is a problem with the display of the menu. Find the /layout/components/Sidebar/ file, remove the permission control permission_routes parameter, and change it to:
<sidebar-item v-for="route in getRouterList" :key="" :item="route" :base-path="" />
import routesArr from '@/router/index'
export default {
components: { SidebarItem, Logo, routesArr },
computed: {
getRouterList() {
return
},
...mapGetters([
// 'permission_routes', // Comment out 'sidebar'
]),OK! Perfect!
Dynamic permission control of vue-elementui-admin
Recently, I plan to carefully learn the code of vue-elemnetui-admin. One is that it needs to be used for work and needs to process some things. The other is that I plan to learn vue well in the future and see the source code, so I will learn from this framework first.
They are all their own study notes and records. If there are any wrong things, please point them out and discuss them together.
I learned about the permission folder, which is used to control the permissions that different users can view menus.
<template>
<div class="app-container">
<el-button type="primary" @click="handleAddRole">New Role</el-button>
<el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
<el-table-column align="center" label="Role Key" width="220">
<template slot-scope="scope">
{{ }}
</template>
</el-table-column>
<el-table-column align="center" label="Role Name" width="220">
<template slot-scope="scope">
{{ }}
</template>
</el-table-column>
<el-table-column align="header-center" label="Description">
<template slot-scope="scope">
{{ }}
</template>
</el-table-column>
<el-table-column align="center" label="Operations">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
<el-form :model="role" label-width="80px" label-position="left">
<el-form-item label="Name">
<el-input v-model="" placeholder="Role Name" />
</el-form-item>
<el-form-item label="Desc">
<el-input
v-model=""
:autosize="{ minRows: 2, maxRows: 4}"
type="textarea"
placeholder="Role Description"
/>
</el-form-item>
<el-form-item label="Menus">
<el-tree
ref="tree"
:check-strictly="checkStrictly"
:data="routesData"
:props="defaultProps"
show-checkbox
node-key="path"
class="permission-tree"
/>
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
<el-button type="primary" @click="confirmRole">Confirm</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import path from 'path'
import { deepClone } from '@/utils'
import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
const defaultRole = {
key: '',
name: '',
description: '',
routes: []
}
export default {
data() {
return {
role: ({}, defaultRole),
routes: [], //Route list rolesList: [], // Role list and corresponding routing information dialogVisible: false,
dialogType: 'new',
checkStrictly: false,
defaultProps: {
children: 'children',
label: 'title'
}
}
},
computed: {
routesData() {
return
}
},
created() {
// Mock: get all routes and roles list from server
() // Get all route lists () // Get all roles plus permission routes inside },
methods: {
async getRoutes() {
const res = await getRoutes() // res is a list of all routes, composed of constantRoutes static routes and asyncRoutes dynamic route stitching = // Assign all route lists to serviceRoutes = () // Spanning tree data },
async getRoles() {
const res = await getRoles() // Get all role information and the corresponding route information of the role = // Get the table data },
// Reshape the routes structure so that it looks the same as the sidebar
// The method to generate the final route, the parameters are all routing information and '/' generateRoutes(routes, basePath = '/') {
const res = []
for (let route of routes) { // traverse all routing information // skip some route
if () { continue } // The hidden property is true, then continue
const onlyOneShowingChild = (, route) // Get the complete information of the subroutine // ('onlyOneShowingChild', onlyOneShowingChild)
// The route returns false from the second-level menu and performs recursion // You can set alwaysShow: true so that it ignores the rules defined before and displays the root route // If there is chilren and generated information and is not related to the route if ( && onlyOneShowingChild && !) {
route = onlyOneShowingChild
}
const data = {
path: (basePath, ),
title: &&
}
// recursive child routes
if () { // Subroutine of recursive routing = (, )
}
(data) // Put it in res to generate a route }
return res
},
// Put the tree's data routes into the array generateArr(routes) {
let data = []
(route => {
(route)
if () {
const temp = ()
if ( > 0) {
data = [...data, ...temp]
}
}
})
return data
},
handleAddRole() {
= ({}, defaultRole)
if (this.$) {
this.$([])
}
= 'new'
= true
},
// Display menu information for this role handleEdit(scope) {
= 'edit' // Modify the role permission menu = true
= true
= deepClone() // Deeply clone the information of the line, including routing information ('role',)
this.$nextTick(() => {
const routes = () // Generate routing information that this role can view // Set the menu that can be seen by this role has been selected, (routes) receive an array of selected node data. this.$((routes))
// set checked state of a node not affects its father and child nodes
= false
// When the check box is displayed, do you strictly follow the practice of not being associated with the father and son })
},
handleDelete({ $index, row }) {
this.$confirm('Confirm to remove the role?', 'Warning', {
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
type: 'warning'
})
.then(async() => {
await deleteRole()
($index, 1)
this.$message({
type: 'success',
message: 'Delete succed!'
})
})
.catch(err => { (err) })
},
// Generate the selected routing structure generateTree(routes, basePath = '/', checkedKeys) {
const res = []
for (const route of routes) { // Generate the absolute path to each route const routePath = (basePath, )
// recursive child routes
if () { // Recursive children = (, routePath, checkedKeys)
}
// If the path to the selected result contains the current route that traverses all routes, or the route does not have a subroutine, place the route if ((routePath) || ( && >= 1)) {
(route)
}
}
return res
},
async confirmRole() {
const isEdit = === 'edit'
const checkedKeys = this.$() // Generate array of keys for all selected nodes ('checkedKeys', checkedKeys)
// Deeply clone the entire route list, compare the selected routes with all routes, and generate the selected route structure = (deepClone(), '/', checkedKeys)
// If it is to modify the role permission menu if (isEdit) {
await updateRole(, ) //Update the menu permissions of this role by adjusting the interface for (let index = 0; index < ; index++) {
if ([index].key === ) {
(index, 1, ({}, ))
break
}
}
} else { // If it is not edited, it is added to new role information, and add new roles when adjusting the interface. const { data } = await addRole()
=
()
}
const { description, key, name } =
= false
this.$notify({ // Prompt message title: 'Success',
dangerouslyUseHTMLString: true,
message: `
<div>Role Key: ${key}</div>
<div>Role Name: ${name}</div>
<div>Description: ${description}</div>
`,
type: 'success'
})
},
// reference: src/view/layout/components/Sidebar/
onlyOneShowingChild(children = [], parent) { // The parameter is a subroutine. Parent route let onlyOneChild = null
const showingChildren = (item => !) // Get the route display in the child route that is not hidden in children // When there is only one subroutine, the subroutine is itself // When there is only one child route, the child route is displayed by default
if ( === 1) {
// () method can parse multiple paths into a normalized absolute path, as the root path, and as the spliced path onlyOneChild = showingChildren[0]
= (, )
// Return the complete routing information of the subroutine return onlyOneChild
}
// If there is no child route to be displayed, the parent route will be displayed // Show parent if there are no child route to display
if ( === 0) {
onlyOneChild = { ... parent, path: '', noShowingChildren: true }
return onlyOneChild
}
return false
}
}
}
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.