Vue 前端页面按钮权限控制

前言

按钮权限控制的功能其实在前面的一篇的页面权限管理也包含有这个功能，但是没有凸显出来，所以现在单独写一篇文章用来记录一下

---

一、什么是按钮权限控制？

刚刚做完了一个后台管理系统，有用到按钮权限控制，所以记录一下。按钮权限控制就是说对于不同的用户，可操作的按钮是不一样的，比如有些按钮有些用户是看不见，有些用户是可以看得见的。应用场景：用户A能看得到‘新增’按钮，而用户B是看不到‘新增’按钮的

二、使用步骤

按钮权限控制，我知道的有两种解决方案:1.定义一个全局方法,配合v-if实现（下面会介绍）;2.使用自定义指令;
思路：在用户登录成功后,获取用户的按钮权限(数组格式),存储到store中，然后在工具类中定义一个公共函数hasPermission，在按钮中调用hasPermission()函数，把传入的关键字和store的按钮权限进行对比，看看是否存在，如果存在就显示，不存在就隐藏

1.获取按钮权限数据，存储在store中

用户登录成功之后就会调用getInfo方法获取用户页面权限和按钮权限

permissionList即为按钮权限的数组格式

store文件中的user.js定义getInfo

import {
    login,
    logout,
    getInfo
} from '@/api/user'
import cookieUtils from '../../utils/auth'
// eslint-disable-next-line no-unused-vars
import router from '../../router/index'
// eslint-disable-next-line no-unused-vars
import store from '../../store'

import wutong from '@/assets/img/wutong_img.png'
const getDefaultState = () => {
    return {
        nickname: '',
        userId: '',
        // avatar: 'https://www.gravatar.com/avatar/6560ed55e62396e40b34aac1e5041028',
        avatar: wutong,
        roleName: '',
        menus: [],
        permissions: []
    }
}

const state = getDefaultState()

const mutations = {
    SET_USER: (state, userInfo) => {
        state.nickname = userInfo.nickname
        state.userId = userInfo.userId
        state.roleName = userInfo.roleName
        state.menus = userInfo.menuList
        state.permissions = userInfo.permissionList
    },
    RESET_USER: (state) => {
        state.nickname = ''
        state.userId = ''
        state.roleName = ''
        state.menus = []
        state.permissions = []
    }

}

const actions = {

    // get user info
    GetInfo({
        commit,
        state
    }) {
        return new Promise((resolve, reject) => {
            getInfo().then(data => {
                // console.log('get User Info: ', data)
                // 账号在其他地方登录
                if (!data) {
                    commit('RESET_USER')
                    window.sessionStorage.removeItem('overdueloan')
                    // must remove  token  first
                    cookieUtils.removeJwtToken()
                    cookieUtils.removeUserType()
                    router.push({ path: '/login' })
                    return
                }

                // 储存用户信息
                commit('SET_USER', data.data.userPermission)
                // cookie保存登录状态,仅靠vuex保存的话,页面刷新就会丢失登录状态
                // 生成路由
                const userPermission = data.data.userPermission
                store.dispatch('GenerateUserRoutes', userPermission).then(() => {
                    // 生成该用户的新路由json操作完毕之后,调用vue-router的动态新增路由方法,将新路由添加
                    router.addRoutes(store.getters.addRouters)
                })
                resolve(data)
            })
            // .catch(error => {
            //   reject(error)
            // })
        })
    },


}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

导出getters方便使用

2.定义公共函数

然后全局注册

3.使用hasPerm控制按钮

三.最后一种按钮控制的解决方案是使用自定义指令

因为我没有使用过自定义指令来控制按钮所以我就不在这里介绍了，下面是我在网上看到的自定义指令的写法，可以借鉴借鉴别人的写法，当然你要是有好的写法也欢迎留言介绍

大佬的写法1：自定义指令控制按钮权限

大佬的写法2：自定义指令控制按钮权限