Laravel Breeze+React+Inertia中为Auth变量添加用户角色权限数据

1. 定位Auth数据的来源 #

Laravel Breeze（Inertia栈）中，前端的auth变量是通过后端的HandleInertiaRequests中间件全局共享的，文件路径为app/Http/Middleware/HandleInertiaRequests.php。

2. 修改中间件扩展用户数据 #

打开该文件，找到share方法，在auth数组的user字段中追加角色和权限数据，根据你的关联关系（一对一/一对多/多对多）调整代码：

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    protected $rootView = 'app';

    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user()
                    ? $request->user()->load([
                        'roles', // 加载用户关联的角色
                        'permissions' // 加载用户关联的权限
                    ])->only([
                        'id',
                        'name',
                        'email',
                        'roles', // 加入角色数据
                        'permissions' // 加入权限数据
                    ])
                    : null,
            ],
        ]);
    }
}

如果需要将权限转为更易判断的名称数组，可修改为：

'user' => $request->user()
    ? $request->user()->load([
        'roles',
        'permissions'
    ])->transform(function ($user) {
        return [
            'id' => $user->id,
            'name' => $user->name,
            'email' => $user->email,
            'roles' => $user->roles->pluck('name'), // 返回角色名称数组
            'permissions' => $user->permissions->pluck('name'), // 返回权限名称数组
        ];
    })
    : null,

3. 确保User模型定义关联关系 #

在app/Models/User.php中添加与角色、权限的关联方法（根据数据库结构调整）：

// 多对多关联示例（一个用户对应多个角色）
public function roles()
{
    return $this->belongsToMany(Role::class);
}

// 多对多关联示例（一个用户对应多个权限）
public function permissions()
{
    return $this->belongsToMany(Permission::class);
}

4. 前端使用扩展后的Auth数据 #

现在可以在React组件的auth.user中直接访问角色和权限，用于条件渲染：

import React, { useState } from 'react';
import Navbar from '@/Components/Navbar';

export default function Authenticated({ auth, header, children }) {  
    const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);

    // 示例：判断用户是否拥有admin角色
    const isAdmin = auth.user.roles.includes('admin');
    // 示例：判断用户是否拥有编辑文章权限
    const canEditPost = auth.user.permissions.includes('edit-post');

    return (
        <div className="min-h-screen bg-gray-100">
            <nav className="bg-white border-b border-gray-100">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between h-16">
                        <Navbar userData={auth.user.name} method="post"/>
                        {/* 仅管理员可见的按钮 */}
                        {isAdmin && (
                            <button className="ml-4 px-4 py-2 bg-blue-600 text-white rounded">管理面板</button>
                        )}
                    </div>
                </div>
            </nav>

            {header && (
                <header className="bg-white shadow">
                    <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">{header}</div>
                </header>
            )}

            <main>{children}</main>
        </div>
    );
}

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