根据前面路由一章的思路,用户在登录后后端可以传递一张用户权限表或者直接表明用户的身份来明确用户的权限。
关于页面页面级的鉴权在布局、路由与侧边栏 已经讲过,但是对于功能级的鉴权,比如说根据用户权限控制某个特殊按钮的是否可点击,可以利用vue指令实现。
<script setup>
import { ref } from 'vue'
// 权限表
const authMap = {
CLICKME_CLICK: false
}
// 指令
const vAuth = {
created(el, binding){
el.disabled = authMap[binding.value] === false
}
}
</script>
<template>
<div>
<button v-auth="'CLICKME_CLICK'">click me</button>
</div>
</template>
只在前端进行防护作用是有限的,用户有可能会绕开前端限制,例如低权限用户找到高权限操作链接,直接进行越权攻击,因此后端也应该做相应的处理。
详情见: 越权攻击与JWT