基于vue的前端页⾯按钮权限控制
前端框架是基于vue-element-admin的
实现思路就是从后台根据⽤户查询⽤户所分配的所有按钮权限 每⼀个按钮都有标识
然后放进store中
定义全局变量 在页⾯按钮做匹配，判断按钮传⼊的是否在store中存在  存在就显⽰ 不存在就不显⽰.具体实现步骤如下标红部分代码是关于前端按钮部分的
⽂件地址 src/store/modules/user.js
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router, { resetRouter } from '@/router'
import {
setStore,
getStore,
removeStore
} from '@/utils/store'
const state = {
token: getToken(),
name: '',
avatar: '',
introduction: '',
buttons: [],
roles: [],
isLock: getStore({
name: 'isLock'
}) || false,
lockPasswd: getStore({
name: 'lockPasswd'
}) || ''
}
const mutations = {
SET_TOKEN: (state, token) => {
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction
},
SET_DEPTID: (state, deptId) => {
state.deptId = deptId
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_BUTTONS: (state, buttons) => {
state.buttons = buttons
},
SET_ROLES: (state, roles) => {
},
SET_LOCK_PASSWD: (state, lockPasswd) => {
state.lockPasswd = lockPasswd
setStore({
name: 'lockPasswd',
content: state.lockPasswd,
type: 'session'
})
},
SET_LOCK: (state, action) => {
state.isLock = true
setStore({
name: 'isLock',
content: state.isLock,
type: 'session'
})
},
CLEAR_LOCK: (state, action) => {
state.isLock = false
state.lockPasswd = ''
removeStore({
vue element adminname: 'lockPasswd'
})
removeStore({
name: 'isLock'
})
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const username = im()
const validateCode = im()
return new Promise((resolve, reject) => {
login(username, userInfo.password, validateCode).then(response => {        const data = response
commit('SET_TOKEN', ken)
ken)
resolve()
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
ken).then(response => {
const data = response
if (!data) {
reject('Verification failed, please Login again.')
}
const { roles, name, avatar, introduction, deptId, buttons } = data
// roles must be a non-empty array
if (!roles || roles.length <= 0) {
reject('getInfo: roles must be a non-null array!')
}
const buttonAuthList = []
buttons.forEach(button => {
if (button.perms) {
buttonAuthList.push(button.perms)
})
// alert(JSON.stringify(buttonAuthList) + '--' + buttonAuthList.length)
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_INTRODUCTION', introduction)
commit('SET_DEPTID', deptId)
commit('SET_BUTTONS', buttonAuthList)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
ken).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_BUTTONS', [])
removeToken()
resetRouter()
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_BUTTONS', [])
removeToken()
resolve()
})
},
// dynamically modify permissions
changeRoles({ commit, dispatch }, role) {
return new Promise(async resolve => {
const token = role + '-token'
commit('SET_TOKEN', token)
setToken(token)
const { roles } = await dispatch('getInfo')
resetRouter()
// generate accessible routes map based on roles
const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
// dynamically add accessible routes
router.addRoutes(accessRoutes)
// reset visited views and cached views
dispatch('tagsView/delAllViews', null, { root: true })
resolve()
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
⽂件地址 : src/store/getters.js
const getters = {
sidebar: state => state.app.sidebar,
language: state => state.app.language,
size: state => state.app.size,
device: state => state.app.device,
visitedViews: state => state.tagsView.visitedViews,  cachedViews: state => state.tagsView.cachedViews,  token: state => ken,
avatar: state => state.user.avatar,
name: state => state.user.name,
deptId: state => state.user.deptId,
introduction: state => state.user.introduction,
roles: state => les,
buttons: state => state.user.buttons,
permission_routes: state => utes,  isLock: state => state.user.isLock,
lockPasswd: state => state.user.lockPasswd,
errorLogs: state => Log.logs
}
export default getters
路径 src/utils/permission.js
import store from '@/store'
/**
* @param {Array} value
* @returns {Boolean}
* @example see @/views/permission/directive.vue
*/
export default function checkPermission(value) {
if (value && value instanceof Array && value.length > 0) {
const roles = s && les
const permissionRoles = value
const hasPermission = roles.some(role => {
return permissionRoles.includes(role)
})
if (!hasPermission) {
return false
}
return true
} else {
<(`need roles! Like v-permission="['admin','editor']"`)    return false
}
}
// ⽤来控制按钮的显⽰
export function hasBtnPermission(permission) {
const myBtns = s.buttons
return myBtns.indexOf(permission) > -1
}
⽂件路径 src/main.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。