I installed the breeze + react starter kit. Also, got the Spatie permissions, and seeded some roles, users etc.
I made a middleware to redirect the user based on role, and also a dashboard page specific to a certain role. All works fine, except I don't seem to be able to pass variables to the react view - dev tools show me an 'undefined' error basically.
app/Http/Middleware/CheckUserRole.php
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class CheckUserRole
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
* @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
*/
public function handle(Request $request, Closure $next, ...$guards)
{
$user = Auth::user();
if ($user->hasRole('BankAdmin')) {
return redirect('/admin/dashboard');
}
if ($user->hasRole('BankUser')) {
return redirect('/user/dashboard');
}
return redirect('/');
}
}
in my routes/web.php
Route::get('/', function () {
return Inertia::render('Welcome', [
'canLogin' => Route::has('login'),
'canRegister' => Route::has('register'),
'laravelVersion' => Application::VERSION,
'phpVersion' => PHP_VERSION,
]);
});
Route::get('/dashboard', function () {
return Inertia::render('Dashboard',
);
})->middleware(['auth', 'verified', 'checkrole'])->name('dashboard');
Route::get('/user/dashboard', UserDashboardController::class);
require __DIR__ . '/auth.php';
app/Http/Controllers/UserDashboardController.php
<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
use Illuminate\Http\Request;
class UserDashboardController extends Controller
{
/**
* Return all users.
*
* @return \Inertia\Response
*/
public function __invoke()
{
return Inertia::render('UserDashboard', [
'message' => 'You are logged in as BankUser',
]);
}
}
resources/js/Pages/UserDashboard.jsx
import React from 'react';
import Authenticated from '@/Layouts/Authenticated';
import {Head} from '@inertiajs/inertia-react';
export default function UserDashboard(props) {
return (
<Authenticated
auth={props.auth}
errors={props.errors}
message={props.message}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
>
<Head title="User Dashboard"/>
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">You're logged in - BankUser!{message} </div>
</div>
</div>
</div>
</Authenticated>
);
}
What am I doing wrong?
Why is message undefined?
