Laravel+InertiaJS下如何基于权限动态隐藏Vue3组件？

针对你担心普通用户能下载到管理员专属组件代码的问题，以下是几种可行的解决方案，能从根源上隐藏敏感组件的存在：

方案一：异步惰性加载组件（后端权限控制加载触发） #

把「删除用户」按钮封装成独立Vue组件，通过后端权限判断控制前端是否触发组件下载：

1. 封装组件：创建DeleteUserButton.vue单独存放删除按钮逻辑
2. 后端传递权限标识：

// Laravel控制器
public function show(User $user)
{
    return inertia('User/Profile', [
        'user' => $user,
        'canDeleteUser' => auth()->user()->isAdmin(),
    ]);
}

3. 前端异步加载组件：

<template>
  <div class="user-profile">
    <!-- 普通用户资料内容 -->
    <component v-if="canDeleteUser" :is="DeleteUserButton" :user-id="user.id" />
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
const props = defineProps(['canDeleteUser', 'user'])

// 仅当canDeleteUser为true时，才会发起组件下载请求
const DeleteUserButton = defineAsyncComponent(() => 
  import('./DeleteUserButton.vue')
)
</script>

普通用户因canDeleteUser为false，不会触发组件加载请求，完全接触不到该组件的代码。

方案二：分页面组件实现权限隔离 #

直接为管理员和普通用户返回不同的Inertia页面组件：

// Laravel控制器
public function show(User $user)
{
    if (auth()->user()->isAdmin()) {
        // 管理员页面包含删除按钮
        return inertia('User/AdminProfile', ['user' => $user]);
    }
    // 普通用户页面仅展示基础资料
    return inertia('User/Profile', ['user' => $user]);
}

AdminProfile.vue包含删除按钮逻辑，Profile.vue仅保留普通用户可见内容，普通用户的请求响应中完全不会出现管理员页面组件的引用。

方案三：Blade + Inertia混合渲染（服务器端直接控制输出） #

沿用你熟悉的Blade权限判断逻辑，在服务器端直接决定是否输出管理员按钮：

@extends('layouts.app')

@section('content')
    @inertia
    @if(auth()->user()->isAdmin())
        <div class="admin-actions">
            <button onclick="handleDeleteUser({{ $user->id }})">删除用户</button>
        </div>
        <script>
            function handleDeleteUser(userId) {
                Inertia.delete(`/users/${userId}`);
            }
        </script>
    @endif
@endsection

服务器端直接过滤内容，普通用户的HTML响应中不会包含任何删除按钮相关代码，彻底避免前端篡改权限标识的可能。

关键注意事项 #

无论采用哪种方案，后端接口必须做二次权限校验：删除用户的接口必须通过管理员中间件或代码判断，防止用户直接构造请求调用接口：

// Laravel路由
Route::delete('/users/{user}', [UserController::class, 'destroy'])
    ->middleware('admin');

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