功能按钮权限:
如需查看菜单权限控制请在主页查看
实现按钮权限就简单了, 用户登录之后, 在
router.beforeEach()
获取后端返回的权限标识,
并且将权限标识存储到vuex
当中, 在需要做按钮权限的位置使用v-if
来去判断接口是否返回了该按钮权限来显示或隐藏该按钮.
我使用了mixins
来封装了在计算属性中获取vuex
中保存的权限标识,
并且全局混入该mixins
因为在我的项目需要做权限的位置很多, 所以使用了全局导入, 大家也可以按照自己的需求,
但是最优的方案还是局部混入mixins
以防全局混入出现难以预估的问题
第一步: 在路由前置守卫router.beforeEach()
中获取权限, 并且将获取到的权限添加至vuex
中做存储
/**
* permission.js
* 权限控制管理
*/
import router from "@/router"
import store from '@/store'
// 防止路由无限循环
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
对按钮做权限控制:
- 局部导入
import { permissionCodeList } from '@/permission/mixins'
- 注册混入
mixins: [permissionCodeList]
按钮权限使用
v-if
来做权限控制, 而不用v-show
来控制管理,
因为v-if
是将元素向dom
树中动态的插入或者移除来实现元素的显隐, 所以当v-if
判断为假的时候,
初始渲染就不会将该元素渲染至dom
树当中,
保证了权限控制的准确性,稳定性。如果使用v-show
来控制元素,那么初始化渲染就会将该元素渲染至dom
树当中,
若v-show
判断为假的时候, 只会在该元素的本身添加css
属性为display: none
来将元素隐藏,
所以就可能会导致问题: 如果用户打开开发者工具就可能会在Elements
中去修改元素的css
属性来显示该元素