Laravel и Vue: создание веб-сайта портфолио с административной панелью CRUD

Домашняя страница администратора и система входа в систему

Наша домашняя страница администратора должна быть такой:

админ / home.vue 👇

<template>
    <div id="admin-home">
        <ProfileEditor/>
        <PortfolioEditor/>
        <AboutEditor/>
        <social-media-links-editor/>
    </div>
</template>

<script>
    import ProfileEditor from "./sections/ProfileEditor";
    import PortfolioEditor from "./sections/PortfolioEditor";
    import AboutEditor from "./sections/AboutEditor";
    import SocialMediaLinksEditor from "./sections/socialMediaLinksEditor";

    export default {
        name: "AdminHome",
        components: {
            SocialMediaLinksEditor,
            AboutEditor,
            PortfolioEditor,
            ProfileEditor
        },
    }
</script>

Давайте рассмотрим систему входа в систему.

Зачем нам нужна система входа в систему?

Он нам нужен, потому что есть некоторые функции / маршруты API, которые мы не хотим делать общедоступными. Мы хотим, чтобы ими управлял только администратор.

Где эти функции / маршруты api?

Функции администратора находятся в файле маршрутов api.php. Нам нужно защитить эти маршруты.

Как мы защищаем маршруты?

Мы можем защитить маршруты api, установив и используя промежуточное программное обеспечение santum.

В этой главе мы:

Установите промежуточное ПО sanctum
Назначьте промежуточное ПО santum
Запретить неаутентифицированным пользователям доступ к компоненту администратора
Создайте компонент входа в систему
Создать пользователя
Перенаправить аутентифицированного пользователя

Установка промежуточного программного обеспечения sanctum

Мы должны перейти в терминал / cmd и ввести следующее:

composer require laravel/sanctum

Устранение неполадок: заключение Не устанавливайте

Если вы получаете сообщение об ошибке типа «- Заключение: не устанавливать…», обновите композитор, запустив composer update в терминале.

И запустите composer require laravel/sanctum после завершения обновления композитора.

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

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

Это даст нам sanctum.php в папке config.

Теперь у нас должен быть файл EnsureFrontendRequestsAreStateful.php в vendor / laravel / sanctum / src / Http / Middleware.

Мы должны использовать этот файл в app / Http / Kernal.php, добавив следующую строку использования

use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

Нам нужно вставить это в массив api защищенного промежуточного программного обеспечения Kernal.

'api' => [
    EnsureFrontendRequestsAreStateful::class,
    ...
],

Теперь нам нужно перейти в наш файл .env и добавить следующее:

SANCTUM_STATEFUL_DOMAINS=domain.example

Здесь можно сказать, что святилище установлено. Теперь нам нужно использовать промежуточное ПО sanctum, назначив его некоторым маршрутам.

Назначение промежуточного программного обеспечения sanctum

Чтобы назначить промежуточное ПО для маршрута, необходимо добавить ->middleware('INSERT NAME OF MIDDLEWARE').

Здесь мы хотим использовать промежуточное программное обеспечение auth: sanctum, чтобы мы защищали маршрут публикации / profile следующим образом:

Route::post('/profile','ProfileController@store')->middleware('auth:sanctum');

Мы могли добавить код ->middleware('auth:sanctum') к каждому маршруту, который мы хотим защитить святыней. Это было бы хорошо, но на это уйдет много времени.

Если вы не хотите уставать, набирая или копируя один и тот же код на разные маршруты, вы можете применить промежуточное ПО к группе маршрутов, например:

Route::middleware('auth:sanctum')->group(function () {
    // INSERT ROUTES HERE
});

Перейдем к api.php и создадим группу маршрутов промежуточного программного обеспечения, например:

Route::middleware('auth:sanctum')->group(function () {
    Route::post('/profile', 'ProfileController@store');
    ...
});

Теперь, если мы отправим сообщение в api / profile, он пройдет через промежуточное программное обеспечение sanctum и выдаст вам ошибку 401 на вкладке сети, если вы не вошли в систему.

С этой точки зрения:

Пользователи, не прошедшие аутентификацию, НЕ МОГУТ ИСПОЛЬЗОВАТЬ компонент администратора😃👍
Пользователи, не прошедшие аутентификацию, МОГУТ ДОСТУП к компоненту администратора🙁👎

Время перевернуть этот хмурый взгляд вверх дном

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

Блокирование доступа неаутентифицированных пользователей к компоненту администратора

Нам нужно перейти в router.js и добавить средство навигации.

Навигационная охрана

Навигационная защита - это функция Vue.js, которая помогает вам перенаправить или отменить посещение маршрута, если условия не выполняются.

Навигационная защита, которую мы собираемся использовать, - beforeEnter.

Мы должны отредактировать объект пути администратора маршрутизатора, чтобы включить защиту beforeEnter:

{
    path: '/admin',
    component: AdminHome,
    beforeEnter: INSERT FUNCTION NAME HERE
},

Нам нужно создать функцию, которая будет:

Проверить, не аутентифицирован ли пользователь
Если аутентификация не прошла, перейдите по маршруту / login.
В случае аутентификации перейдите по желаемому маршруту

Давайте посмотрим на создание такой функции:

function requireAuth (to, from, next) {
    if (USER IS UNAUTHENTICATED) {
        next({
            path: '/login',
        })
    } else {
        next()
    }
}

Чтобы такая функция работала, данные должны быть переданы из Laravel во Vue. Нам нужно перейти на welcome.blade.php и вставить следующий скрипт в элемент ‹head› ‹/head›.

<script>
    window.AuthCheck = "{{ Auth::check() ? 1 : 0}}"
</script>

Laravel проверит, вошел ли пользователь в систему или нет, и вернет 1 или 0. Мы можем посетить консоль браузера и увидеть, что если мы введем window.AuthCheck, мы получим либо 1, либо 0.

Создаваемую нами функцию теперь можно изменить на следующее:

function requireAuth (to, from, next) {
    let AuthCheck = window.AuthCheck;
    if (AuthCheck === "0") {
        next({
            path: '/login',
        })
    } else {
        next()
    }
}

и мы можем использовать его как средство навигации beforeEnter.

{
    path: '/admin',
    component: AdminHome,
    beforeEnter: requireAuth
},

Если мы перейдем к маршруту администратора, мы будем перенаправлены на маршрут входа в систему.

С этой точки зрения:

Пользователи, не прошедшие аутентификацию, НЕ МОГУТ ИСПОЛЬЗОВАТЬ компонент администратора😃👍
Пользователи, не прошедшие аутентификацию, НЕ МОГУТ ДОСТУП к компоненту администратора😃👍

Проблема, с которой мы сейчас сталкиваемся, - это отсутствие компонента входа в систему. Мы перенаправляемся на маршрут входа, но не видим никаких компонентов на этом маршруте. Это означает, что нам нужно создать компонент входа в систему.

Компонент входа в систему

Начнем с простой формы входа в систему, которая привязана к объекту возврата данных.

Теперь нам нужно сделать его функциональным, добавив функцию / метод входа в систему.

При использовании промежуточного программного обеспечения sanctum первое, что мы должны сделать, это выполнить запрос на получение к / sanctum / csrf-cookie, а в блоке then мы можем написать код, который выполняет вход пользователя в систему.

methods: {
    login() {
        axios.get('/sanctum/csrf-cookie').then(response => {
            
        })
    }
}

После выполнения запроса на получение мы отправляем в api / login

login() {
    axios.get('/sanctum/csrf-cookie').then(response => {
        axios.post('/api/login', {
            email: this.email,
            password: this.password,
        })
    })
},

Соответствующий маршрут в api.php должен быть:

Route::post('/login', 'Auth\LoginController@login');

Теперь, когда у нас есть компонент входа в систему, нам нужно создать пользователя.

Создание пользователя

Создание пользователя будет выполнено с помощью tinker. Мы должны начать возиться, перейдя в терминал и набрав php artisan tinker.

ВАЖНО - ПАРОЛЬ ДОЛЖЕН БЫТЬ ХЕШЕН

Hash::make(‘INSERT PASSWORD HERE’)

Затем нам нужно перенаправить пользователя в компонент администратора после его аутентификации.

Перенаправление аутентифицированного пользователя

Здесь мы должны добавить then block, чтобы запрограммировать, что происходит после входа пользователя в систему.

После того, как пользователь вошел в систему, мы должны использовать this.$router.push({path: ‘/admin’}), чтобы аутентифицированный пользователь был перенаправлен на / admin.

login() {
    axios.get('/sanctum/csrf-cookie').then(response => {
        axios.post('/api/login', {
            email: this.email,
            password: this.password,
        })
            .then(response => {
                this.$router.push({path: ‘/admin’})
            })
    })
},

Если мы введем правильный адрес электронной почты и пароль, Vue перенаправит нас на путь / admin, но нас встретит защита навигации (beforeEnter: requireAuth).

А средство навигации перенаправляет нас обратно к компоненту входа, потому что значение window.AuthCheck в welcome.blade.php по-прежнему равно 0.

Мы получаем это значение, когда загружаем блейд-файл в браузер. Это означает, что нам нужно либо перезагрузить + перенаправить сайт при входе в систему, либо изменить значение при входе.

Перезагрузка + перенаправление против изменения значения

Код для перезагрузки + перенаправления сайта и перехода на путь администратора - window.location.href = "/admin";

Это работает, но неэффективно. Мы хотим избежать перезагрузки сайта, поэтому лучше изменить значение window.Auth вручную.

Наш метод входа в систему должен быть таким:

Теперь средство навигации посмотрит на window.AuthCheck и обнаружит, что его значение равно 1, и позволит аутентифицированному пользователю перейти по пути администратора.

После этого у нас появился веб-сайт Portfolio с административной панелью CRUD, созданной с использованием Laravel и Vue.

Ниже приведены ссылки на активную версию сайта:

Umar.app/portfolio

Umar.app/portfolio/admin

Спасибо

Laravel и Vue: создание веб-сайта портфолио с административной панелью CRUD - Глава 22