鉴权

根据前面路由一章的思路,用户在登录后后端可以传递一张用户权限表或者直接表明用户的身份来明确用户的权限。

  1. 直接返回用户的身份,例如管理员、用户等,前端实现哪些身份能够访问哪些页面和功能。
  2. 后端返回一张用户权限表,前端根据权限表来判断用户是否有权访问某些页面和功能。

关于页面页面级的鉴权在布局、路由与侧边栏 已经讲过,但是对于功能级的鉴权,比如说根据用户权限控制某个特殊按钮的是否可点击,可以利用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

只在前端进行防护作用是有限的,用户有可能会绕开前端限制,例如低权限用户找到高权限操作链接,直接进行越权攻击,因此后端也应该做相应的处理。

详情见: 越权攻击与JWT

跨站脚本攻击

跨站脚本攻击(XSS)

跨请求伪造

跨站点请求伪造(CSRF)