按钮权限控制

功能按钮权限:

如需查看菜单权限控制请看主页

实现按钮权限就简单了, 用户登录之后, 在router.beforeEach()获取后端返回的权限标识, 并且将权限标识存储到vuex当中, 在需要做按钮权限的位置使用v-if来去判断接口是否返回了该按钮权限来显示或隐藏该按钮. 我使用了mixins来封装了在计算属性中获取vuex中保存的权限标识, 并且全局混入该mixins因为在我的项目需要做权限的位置很多, 所以使用了全局导入, 大家也可以按照自己的需求, 但是最优的方案还是局部混入mixins以防全局混入出现难以预估的问题

第一步: 在路由前置守卫router.beforeEach()中获取权限, 并且将获取到的权限添加至vuex中做存储

/**
 *  permission.js
 *	权限控制管理
 */
import router from "@/router"
import store from '@/store'
import { changeChildRouter } from '@/router/system'

// 防止路由无限循环
let routeFlag = false;
// 导航守卫
router.beforeEach(async (to, from, next) => {
  let token = localStorage.getItem('token');
  // 如果没有token，并且当前不是登录页，就跳转到登录界面
  if (!token && !to.path.includes('/login')) {
    routeFlag = false
    next('/login')
  } else if (to.path.includes('/login')) {
    routeFlag = false
    next()
  } else {
    if (routeFlag) return next()
    // 权限控制
    routeFlag = true
    // 1. 根据上面定义的 routeFlag 得出: 用户没有获取权限/刷新页面权限丢失，则先调用获取权限的接口
   const res = await store.dispatch('menu/MenuInfo')
    // 2. 将权限存储到 vuex 当中
   store.commit('menu/setPermissionCodeList', res)
  }
})

第二步: 封装mixin逻辑构造权限的计算属性, 待后续权限按钮身上做按钮的权限控制管理

/**
 * 按钮权限的管理
 */
export const permissionCodeList = {
  computed: {
    permissionCodes() {
      // roleId 为具体对应按钮的权限标识
      return this.$store.state.menu.permissionCodeList.map(item => parseInt(item.roleId))
    }
  },
}

因为我在main.js中全局导入了, 所以只需在需要做权限的按钮的位置直接使用v-if="permissionCodes.includes(10212)"来实现按钮权限的控制, 该标识同样需要跟后端来确认某个权限按钮的权限标识

如果局部使用, 只需要导入并且注册mixins即可使用v-if对按钮做权限控制:

1. 局部导入import { permissionCodeList } from '@/permission/mixins'
2. 注册混入 mixins: [permissionCodeList]

按钮权限使用v-if来做权限控制, 而不用v-show来控制管理, 因为v-if是将元素向dom树中动态的插入或者移除来实现元素的显隐, 所以当v-if判断为假的时候, 初始渲染就不会将该元素渲染至dom树当中, 保证了权限控制的准确性,稳定性。如果使用v-show来控制元素,那么初始化渲染就会将该元素渲染至dom树当中, 若v-show判断为假的时候, 只会在该元素的本身添加css属性为display: none来讲元素隐藏, 所以就可能会导致问题: 如果用户打开开发者工具就可能会在Elements中去修改元素的css属性来显示该元素