若依系统v-hasPermi和v-if冲突后的解决办法

业务说明

对于企业信息列表中的信用列，使用v-hasPermi进行权限的控制，当登录人为管理员时才能看到此列。 现在有A、B、C三个模块，点击后都跳转到此列表。

要求：从C点击跳转后隐藏信用列，A、B点击跳转后显示信用列。

问题描述

相关代码

......
<el-table-column label="信用" align="center" width="180px" v-hasPermi="'xyda:pjjg:view'" v-if="isC == true">
	<template #default="scope">
		<span v-if="scope.row.hyxyQx">{{ scope.row.qyxy||'' }}</span>
	</template>
</el-table-column>
......

// isC为布尔值，实际业务中通过路由判断是否从C点击，挂载时做判断

运行后报错

排查过程

1. v-hasPermi为身份权限判断
2. v-if为点击路径判断

两者之间需求功能并不冲突，但这么写的时候会报错，于是开始尝试解决。

首先尝试单独写v-hasPermi和v-if，都没有问题，猜测是两者的指令冲突导致的问题。

其次尝试将v-if改为v-show之后，报错消失，但v-show失效，无法控制信用列的显隐。

于是换一种思路，既然两个指令冲突，那么只保留一种指令，不使用v-hasPermi，将身份权限和路径判断全部写入v-if中。

解决方案

把指令改成函数，用工具函数判断是否有权限

全局搜索v-hasPermi，找到了对应的js文件

hasPermi.js

/**
* v-hasPermi 操作权限处理
* Copyright (c) 2019 ruoyi
*/

import useUserStore from '@/store/modules/user'

export default {
	mounted(el, binding, vnode) {
		let { value } = binding
		const all_permission = "*:*:*";
		const permissions = useUserStore().permissions;
		
		if (value && !Array.isArray(value)) value = [value];
		if (value && value instanceof Array && value.length > 0) {
			const permissionFlag = value
			const hasPermissions = permissions.some(permission => {
				return all_permission === permission || permissionFlag.includes(permission)
			})
			if (!hasPermissions) {
				el.parentNode && el.parentNode.removeChild(el)
			}
		} else {
			throw new Error(`请设置操作权限标签值`)
		}
	}
}

添加获取身份权限的方法，返回boolean值

hasPermi.js

// ......其他不变

export function hasPermi(value) {
	const all_permission = "*:*:*";
	const permissions = useUserStore().permissions;
	
	if (value && !Array.isArray(value)) value = [value];
	if (value && value instanceof Array && value.length > 0) {
		const permissionFlag = value
		const hasPermissions = permissions.some(permission => {
		return all_permission === permission || permissionFlag.includes(permission)
		})
		if (!hasPermissions) {
			return false
		}
	} else {
		return true
	}
	return true
}

vue中使用

......
<el-table-column label="信用" align="center" width="180px" v-if="hasPermi('xyda:pjjg:view') && isC == false">
	<template #default="scope">
		<span v-if="scope.row.hyxyQx">{{ scope.row.qyxy||'' }}</span>
	</template>
</el-table-column>
......

// js中引入hasPermi

✅Over