如何在Vue组件中使用Laravel auth()实现按钮权限控制？

核心实现前提 #

Vue运行在浏览器端，无法直接调用Laravel的Auth门面获取登录用户信息，首先需要将认证用户的基础数据注入为前端全局可读取的对象。
在全局布局Blade模板的顶层位置添加如下脚本，同时同步注入通用CSRF Token：

<script>
// 全局CSRF Token，供前端链接、接口请求拼接使用
window.csrfToken = '{{ csrf_token() }}'
// 全局当前登录用户信息，未登录时为null
window.AuthUser = @json(auth()->user())
</script>

Vue组件内的逻辑实现 #

原Blade的权限判断规则可拆解为两个核心校验条件：

• 用户未处于游客状态（已登录）
• 帖子的作者ID与当前登录用户ID匹配

满足上述两个条件时，才输出编辑、删除操作按钮。在Vue中通过v-if绑定计算属性实现1:1的效果，v-if会直接在DOM层面移除无权限的按钮元素，与Blade服务端渲染时不输出对应内容的效果完全一致：

<template>
  <div class="post-item">
    <h3>{{ post.title }}</h3>
    <p class="post-body">{{ post.content }}</p>

    <!-- 权限控制的操作按钮 -->
    <a
      v-if="canManagePost"
      :href="`/home/edit/${post.slug}`"
      class="btn-sm btn-info"
    >Edit Post</a>
    <a
      v-if="canManagePost"
      :href="`/home/delete/${post.id}?_token=${window.csrfToken}`"
      class="btn-sm btn-warning"
    >Delete</a>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  post: {
    type: Object,
    required: true
  }
})

// 复刻Blade的判断逻辑
const canManagePost = computed(() => {
  return window.AuthUser && props.post.author_id === window.AuthUser.id
})
</script>

关键注意事项 #

• 前端的权限判断仅用于优化交互体验、隐藏无权限的操作入口，绝对不能替代后端接口的权限校验。与Blade场景一致，即使前端隐藏了按钮，对应的编辑、删除接口必须在后端再次校验登录态、帖子归属，防止用户手动构造请求越权操作。
• 若使用Vue2选项式API，核心逻辑无任何区别，仅需将计算属性定义在computed配置块、组件入参定义在props配置块即可，判断逻辑通用。
• 全局注入用户信息时，仅暴露业务需要的非敏感字段即可，不要在前端存储过多敏感权限标识，若后续需要细粒度权限判断，可通过独立接口按需拉取对应权限数据。

内容的提问来源于stack exchange，提问作者Ser