feat: add auth/auths/authsAll

This commit is contained in:
yoyo0926 2022-11-25 10:09:00 +08:00
parent 392ae673f3
commit 880d386257
6 changed files with 111 additions and 32 deletions

View File

@ -1,22 +1,18 @@
import { permission } from '@/utils/permission'
import { permissionAll } from '@/utils/permission'
import tool from '@/utils/tool';
/**
* 用户权限指令
* @directive 单个权限验证v-auth="'xxx'"
* @directive 多个权限验证满足一个则显示v-auths="['xxx','xxx']"
* @directive 多个权限验证全部满足则显示v-auths-all="['xxx','xxx']"
*/
export default {
mounted(el, binding) {
const { value } = binding
if(Array.isArray(value)){
let ishas = false;
value.forEach(item => {
if(permission(item)){
ishas = true;
}
})
if (!ishas){
el.parentNode.removeChild(el)
}
}else{
if(!permission(value)){
el.parentNode.removeChild(el);
}
mounted (el, binding) {
if(permissionAll()){
return
}
let permissions = tool.data.get("PERMISSIONS");
if (!permissions.some((v) => v === binding.value)) el.parentNode.removeChild(el);
}
};
}

24
src/directives/auths.js Normal file
View File

@ -0,0 +1,24 @@
import { permissionAll } from '@/utils/permission'
import tool from '@/utils/tool';
/**
* 用户权限指令
* @directive 单个权限验证v-auth="'xxx'"
* @directive 多个权限验证满足一个则显示v-auths="['xxx','xxx']"
* @directive 多个权限验证全部满足则显示v-auths-all="['xxx','xxx']"
*/
export default {
mounted (el, binding) {
if(permissionAll()){
return
}
let permissions = tool.data.get("PERMISSIONS");
let flag = false;
permissions.map((val) => {
binding.value.map((v) => {
if (val === v) flag = true;
});
});
if (!flag) el.parentNode.removeChild(el);
}
}

View File

@ -0,0 +1,19 @@
import { permissionAll, judementSameArr } from '@/utils/permission'
import tool from '@/utils/tool';
/**
* 用户权限指令
* @directive 单个权限验证v-auth="'xxx'"
* @directive 多个权限验证满足一个则显示v-auths="['xxx','xxx']"
* @directive 多个权限验证全部满足则显示v-auths-all="['xxx','xxx']"
*/
export default {
mounted (el, binding) {
if(permissionAll()){
return
}
let permissions = tool.data.get("PERMISSIONS");
const flag = judementSameArr(binding.value, permissions);
if (!flag) el.parentNode.removeChild(el);
}
}

View File

@ -24,6 +24,8 @@ import scStatusIndicator from './components/scMini/scStatusIndicator'
import scTrend from './components/scMini/scTrend'
import auth from './directives/auth'
import auths from './directives/auths'
import authsAll from './directives/authsAll'
import role from './directives/role'
import time from './directives/time'
import copy from './directives/copy'
@ -63,6 +65,8 @@ export default {
//注册全局指令
app.directive('auth', auth)
app.directive('auths', auths)
app.directive('auths-all', authsAll)
app.directive('role', role)
app.directive('time', time)
app.directive('copy', copy)

View File

@ -1,5 +1,37 @@
import tool from '@/utils/tool';
/**
* 是否含有不限分类有则表示全部允许通过
*/
export function permissionAll() {
const allPermissions = "*/*/*"
let permissions = tool.data.get("PERMISSIONS");
return permissions.includes(allPermissions);
}
/**
* 比对两组数据是否一致
* @param news
* @param old
* @returns {boolean}
*/
export function judementSameArr(news, old) {
// console.log(news)
// console.log(old)
let count = 0;
const leng = news.length;
for (let i in news) {
for (let j in old) {
if (news[i] === old[j]) {
count++;
// console.log(news[i])
}
}
}
// console.log('相同的数量', count)
return count === leng;
}
export function permission(data) {
let permissions = tool.data.get("PERMISSIONS");
if(!permissions){

View File

@ -2,8 +2,12 @@
<el-main>
<el-card shadow="never" header="v-auth 高精度权限控制">
<el-button v-auth="'user.add'" type="primary">v-auth="'user.add'"</el-button>
<el-button v-auth="['user.no','user.add']" type="primary">v-auth="['user.no','user.add']"</el-button>
<el-alert title="v-auth指令 是$AUTH的语法糖, 原先需要使用v-if来判断是否有权限, 使用指令将减少代码冗余. 并且支持传入数组,有一项满足就判断有权限" style="margin-top: 20px;"></el-alert>
<el-button v-auths="['user.no','user.add']" type="primary">v-auths="['user.no','user.add']"</el-button>
<el-button v-auths-all="['list.add','user.add']" type="primary">v-auths-all="['list.add','user.add']"</el-button>
<el-alert title="v-auth指令 是$AUTH的语法糖, 原先需要使用v-if来判断是否有权限, 判断单项权限,如果满足就判断有权限" style="margin-top: 20px;"></el-alert>
<el-alert title="v-auths指令 传入数组,有一项满足就判断有权限" style="margin-top: 20px;"></el-alert>
<el-alert title="v-auths-all指令 传入数组,必须全满足才有权限比如user.no没有这个权限加到这里的话就表示不全部满足" style="margin-top: 20px;"></el-alert>
</el-card>
<el-card shadow="never" header="v-role 角色权限控制" style="margin-top: 15px;">
<el-button v-role="'admin'" type="primary">v-role="'admin'"</el-button>
@ -34,20 +38,20 @@
</template>
<script>
export default {
name: 'directive',
data() {
return {
time1: new Date(),
time2: new Date().setMinutes(new Date().getMinutes()-1),
time3: new Date().setMinutes(new Date().getMinutes()-120),
copyText: '测试复制内容'
}
},
created() {
export default {
name: 'directive',
data() {
return {
time1: new Date(),
time2: new Date().setMinutes(new Date().getMinutes()-1),
time3: new Date().setMinutes(new Date().getMinutes()-120),
copyText: '测试复制内容'
}
},
created() {
}
}
</script>
<style>