Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Ведущий экономист + ... пиктограмма - Как-то Так THIS     Экономическая грамотность и web-решения
Всё по теме: что, как и почему. Актуальные вещи - своими словами.
Повышайте своё качество WITH ME - СПЭМ !
Если тебе не нравится то, что ты получаешь, измени то, что ты даешь. © Карлос Кастанеда     KAKTOTAK.BY - услуги по экономическому проектированию и web-разработке (php/js - telegram, WordPress, Laravel, Vue, SEO)    Кооперация - на постоянной основе    Будь в теме   -    ПОДПИШИСЬ      Мои заметки - ЭКОНОМИКА +  и  Справочник WEB-разработчика | php+js+seo   в Telegram   telegram  

Установка готового решения для аутентификации и авторизации на php: Laravel Breeze, Inertia.js, Vue 3

Установка  готового решения для аутентификации и авторизации на php: Laravel Breeze, Inertia.js, Vue 3

Допустим, нам необходимо создать своего рода каркас для нашего будущего приложения с уже реализованной системой аутентификации и авторизации на php, где для каждого подтвержденного пользователя на основе присвоенных ему в последующем определенных ролей будет доступен определённый функционал в проекте. Это позволит в процессе разработки строить логику для каждой категории участвующих в нем – суперадмин, админ, клиент и т.п..

Т.е., к примеру, для админов отрисовывать свой интерфейс с соответствующим функционалом, а для клиентов свой - личный кабинет со своими функциями.

Оптимальным вариантом для быстрого решения указанной задачи является стартовый комплект на базе php фреймворка Laravel и его экосистемы Breeze, а так же Inertia.js, Vue 3 и Tailwind CSS , который позволит быстро создать гибкую платформу управления доступом для всех зарегистрированных пользователей, а так же минимизировать время на начальную настройку проекта.

Преимущества такого стека:

1. Современные технологии

Laravel: Это один из самых популярных PHP-фреймворков, который активно используется для создания robust веб-приложений. Он предлагает множество инструментов и библиотек для упрощения разработки.

Inertia.js: Позволяет создавать одностраничные приложения (SPA) с использованием привычных методов серверной разработки, что делает его удобным для разработчиков, знакомых с Laravel.

Vue 3: Современная версия Vue.js с новым функционалом (например, <script setup>), который упрощает разработку компонент и улучшает производительность.

Tailwind CSS: Этот CSS-фреймворк находит все больше поклонников благодаря своей гибкости и удобству при стилизации приложений, позволяя быстро создавать адаптивные интерфейсы.

2. Минимальная настройка

Использование Laravel Breeze для аутентификации и управления пользователями минимизирует время на начальную настройку проекта. Это особенно актуально для стартапов и малых команд, которым нужно быстро выйти на рынок.

3. Актуальные практики разработки

Проект соответствует современным практикам разработки, таким как:

SPA (одностраничные приложения): Большую часть работы выполняет JavaScript на клиенте, что делает взаимодействие с сервером более быстрым и отзывчивым.

Адаптивный дизайн: Tailwind CSS делает процесс создания отзывчивых интерфейсов более простым и эффективным.

Установка платформы для проекта

Технологии

  • Laravel Breeze - простая аутентификация на Laravel
  • Inertia.js - для общения между клиентом и сервером
  • Vue 3 с использованием script setup
  • TailwindCSS - утилитарный CSS-фреймворк

Шаг 1: Установка Laravel

Для начала, необходимо установить Laravel. Убедитесь, что у вас уже установлен Composer, который является менеджером пакетов для PHP. Если вы не знаете, как его установить, посетите официальный сайт Composer.

Теперь откройте терминал и выполните следующую команду:

composer create-project --prefer-dist laravel/laravel my-project

Замените my-project на имя вашего проекта. Это создаст новую папку с установленным Laravel.

Шаг 2: Настройка базы данных

Теперь создайте базу данных в вашей системе управления базами данных, например, в MySQL. Вы можете сделать это через интерфейс phpMyAdmin или с помощью команды:

CREATE DATABASE your_database_name;

После создания базы данных откройте файл .env в корне вашего проекта и измените следующие строки, указывая данные вашей базы данных:


DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_user
DB_PASSWORD=your_database_password
    

Замените your_database_name, your_database_user, и your_database_password на свои значения.

Шаг 3: Установка Laravel Breeze

Laravel Breeze - это простое решение для реализации аутентификации. Установите его, выполнив следующие команды в терминале:


composer require laravel/breeze --dev
php artisan breeze:install
    

Эти команды установят Breeze и создадут необходимые маршруты и представления для аутентификации.

Шаг 4: Установка Vue и Inertia.js

Теперь установим Vue и Inertia.js. Убедитесь, что Node.js и npm у вас установлены. После этого выполните следующие команды:


npm install
npm install vue@next
npm install @inertiajs/inertia @inertiajs/inertia-vue3
npm install -D tailwindcss
    

Эти команды устанавливают все нужные зависимости для работы с Vue и Inertia.

Шаг 5: Настройка TailwindCSS

Создайте файл конфигурации для TailwindCSS командой:

npx tailwindcss init

После этого откройте файл tailwind.config.js и добавьте пути к файлам вашего проекта:


module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}
    

Шаг 6: Подключение TailwindCSS

Создайте файл стилей, например resources/css/app.css, и добавьте в него:


@tailwind base;
@tailwind components;
@tailwind utilities;
    

Шаг 7: Компиляция вашего CSS

Теперь вам нужно скомпилировать ваш CSS с помощью TailwindCSS. Для этого выполните следующую команду:

npx tailwindcss -i ./resources/css/app.css -o ./public/css/app.css --watch

Эта команда будет отслеживать изменения в вашем app.css и обновлять скомпилированный файл public/css/app.css в реальном времени.

Шаг 8: Настройка Inertia.js в вашем проекте

Теперь создайте файл для инициализации вашего приложения с Vue и Inertia.js. Откройте файл resources/js/app.js и добавьте следующий код:


import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import '../css/app.css';

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

InertiaProgress.init();
    

Этот код создает новое приложение Vue и подключает Inertia.js, позволяя вам использовать его для маршрутизации и отображения страниц. InertiaProgress.init() отвечает за отображение индикатора загрузки при переходах между страницами.

Шаг 9: Создание маршрутов и представлений для аутентификации

Теперь создадим маршруты и представления для аутентификации. Откройте файл routes/web.php и добавьте следующий код:


use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index'])->name('home');
    
Route::middleware(['auth'])->group(function () {
    // Защищенные маршруты для зарегистрированных пользователей
});
    

Теперь создайте контроллер для обработки маршрутов. Выполните команду:

php artisan make:controller HomeController

Откройте файл app/Http/Controllers/HomeController.php и добавьте следующий код:


<?php
namespace App\Http\Controllers;

use Inertia\Inertia;

class HomeController extends Controller
{
    public function index()
    {
        return Inertia::render('Home');
    }
}
    

Этот контроллер отвечает за отображение главной страницы.

Шаг 10: Создание страницы Home

Теперь создайте файл Vue для главной страницы по следующему пути: resources/js/Pages/Home.vue и добавьте в него следующий код:


<template>
  <div>
    <h1>Добро пожаловать на главную страницу!</h1>
    <p>Это ваша первая страница с использованием Inertia и Vue.</p>
  </div>
</template>

<script setup>
// Здесь может находиться логика компонента
</script>

<style scoped>
/* Стили компонента (если нужно) */
</style>

Шаг 11: Запуск миграций

Теперь нужно запустить миграции для создания необходимых таблиц в базе данных. В терминале выполним следующую команду:

php artisan migrate

Эта команда создаст таблицы для пользователей, которые необходимы для аутентификации в вашем приложении.

Шаг 12: Запуск приложения

Теперь вы готовы запустить ваше приложение. Для этого выполните команду:

php artisan serve

После этого откройте ваш браузер и перейдите по адресу http://localhost:8000. Вы должны увидеть вашу главную страницу.

Шаг 13: Проверка аутентификации

Теперь, чтобы проверить работу аутентификации, вам нужно зарегистрировать нового пользователя и зайти в систему. Laravel Breeze автоматически создает страницы для регистрации и входа в систему.

Откройте ваш браузер и перейдите по адресу http://localhost:8000/register для регистрации нового пользователя. Заполните поля, указав имя, адрес электронной почты и пароль, а затем нажмите кнопку "Зарегистрироваться".

После успешной регистрации вы будете перенаправлены на главную страницу. Попробуйте также перейти по адресу http://localhost:8000/login, чтобы войти в систему с ранее зарегистрированным пользователем.

Это базовая настройка. Вы можете продолжить развивать свое приложение, добавляя новые компоненты, страницы и функциональность. Задействуйте возможности Vue для создания интерактивных интерфейсов и Tailwind для кастомизации стилей.

В дальнейшем, на уже установленной нашей платформе, с помощью миграции дополнительного поля role в таблицу users и фасада Gate мы реализуем механизм проверки всех пользователей на присвоенные им роли. Это позволит выстраивать определённую логику в нашей CRM-системе при разработке.

автор - Михаленко Р.
M R. Автор - kaktotak.by Специализация: финансово-экономическое проектирование - моделирование бизнеса, инвестиционных проектов реального сектора, анализ и оценка эффективности, оптимизация системы управленческих решений.

Широкий спектр web-компетенций для решения задач бизнеса.

Подписывайтесь на мой телеграмм канал - Мои заметки - ЭКОНОМИКА +
Повышайте своё качество вместе со мной - что, как и почему в экономике на простом. Микро- и макро аспекты.

А так же - Справочник WEB-разработчика | php+js+seo
Заметки и нативные решения простых локальных задач на PHP, JS. Кое-что про Laravel, WordPress, Vue и SEO.

  Персональная помощь в экономическом проектировании и веб-разработке:

  • Финансово-экономическое моделирование, анализ, учёт, бизнес-планирование
  • Комплексная web-разработка/поддержка проекта в сети (php/js, seo – Laravel, WordPress, Vue, telegram, администрирование, контент, реклама в Яндекс Директ

  telegram или форма обратной связи

Administrator
133

Конвертер валют
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT - о чём речь
ЭКОНОМИЧЕСКАЯ ГРАМОТНОСТЬ
Хочу Всё Знать. Полезные Советы