====== Laravel UI ======

[[informatica:programacion:php:frameworks:laravel|Laravel]]

Componentes relacionados con la interfaz de usuario: autenticación y registro de usuarios y manejo del front-end (Bootstrap, Vuejs...)

===== Instalación =====

<code>
composer require laravel/ui
</code>

La instalación proporcionará el comando nuevo ''ui'' para Artisan.

<code>
php artisan ui bootstrap --auth
</code>

Esto generará cambios en los ficheros ''package.json'' y ''composer.json'' con las nuevas dependencias.

También se añaden rutas nuevas (''routes/web.php'').

Migraciones para el restablecimiento de contraseñas:

<code>
php artisan migrate:fresh --seed
</code>

También hay nuevos controladores dentro de la carpeta ''app/Http/Controllers/Auth''.

Nuevas vistas en ''resources/views/auth''.

===== Sistema de autenticación =====

En ''routes/web.php'' vemos:

<code php>
// Registra todas las rutas relacionadas con el login, logout, recuperación de la contraseña, verificación de e-mail...
Auth::routes();

// Redirección cuando el usuario se autentica correctamente:
Route::get("/home", "HomeController@index")->name("home");
</code>

===== Laravel Vite =====

Laravel Vite se lanzó con Laravel 9 y pretende reemplazar progresivamente a Laravel Mix.

En general, es cuestión de tener en cuenta que, durante el curso o cualquier otra fuente, cuando sea vea el uso de ''npm run dev'' (con Mix), debes usar con ''npm run build'' (su equivalente en Vite). Y, cuando se vea ''npm run watch'' (en Mix), usar ''npm run dev''.

===== Laravel Mix =====

Compilar CSS y JS.

  * [[https://laravel.com/docs/10.x/mix|Laravel Mix]]

En el fichero ''webpack.mix.js'' vemos que lo que se encuentre en ciertas rutas, se compilarán a otras:

<code javascript>
mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css");
</code>

Laravel Mix necesita Nodejs que incluye ''npm'' para poder instalar las dependencias del frontend:

<code>
npm install
</code>

Se creará la carpeta ''node_modules'' (no debe sincronizarse con producción).

Ahora, para realizar la compilación de los ficheros SCSS y JS:

<code>
npm run dev
</code>

===== Restringir acceso =====

Las rutas se protegen gracias a un **middleware**. Un middleware proporciona un enlace entre sistemas independientes.

Podemos ver el ejemplo del controlador ''HomeController.php'':

<code php>
// code
public function __construct() 
{
    $this->middleware("auth");
}
</code>

Se aplica el middleware ''auth'' que se va a aplicar. Este verifica si el usuario ha iniciado sesión.

En las páginas donde queramos restringir el acceso a usuarios registrados, vamos a su controlador:

<code php>
class ProductController extends Controller
{

   public function __construct() {
       $this->middleware("auth");
   }
   
   // code
}
</code>

Todas las rutas y acciones que tiene el controlador anterior, estarán protegidas por el middleware.

Podríamos indicar qué función proteger:

<code php>
class ProductController extends Controller
{

   public function __construct() {
       $this->middleware("auth")->only("index");
   }
   
   // code
}
</code>

Aplicar protección a todas excepto a algunas:


<code php>
class ProductController extends Controller
{

   public function __construct() {
       $this->middleware("auth")->except(["index", "create"]);
   }
   
   // code
}
</code>