Как сделать авторизацию Laravel + Sanctum + Vue (SPA)?

Для реализации авторизации в Laravel с использованием пакета Sanctum и фреймворка Vue для разработки SPA, необходимо выполнить несколько шагов. Они включают настройку backend-части (Laravel) и frontend-части (Vue).

Шаг 1: Настройка backend-части (Laravel)

1. Установите Laravel, создайте новый проект с помощью команды composer create-project --prefer-dist laravel/laravel project-name.
2. Установите пакет Sanctum, выполнив команду composer require laravel/sanctum.
3. Зарегистрируйте пакет Sanctum, добавив LaravelSanctumSanctumServiceProvider::class в список провайдеров в файле config/app.php.
4. Опубликуйте конфигурацию Sanctum, выполните команду php artisan vendor:publish --provider="LaravelSanctumSanctumServiceProvider".
5. Создайте аутентификацию пользователя, используя php artisan make:auth.

Шаг 2: Настройка frontend-части (Vue)

1. Установите Vue CLI, если еще не установлено, командой npm install -g @vue/cli.
2. Создайте новый проект Vue с помощью команды vue create project-name.
3. Введите cd project-name, чтобы перейти в директорию проекта.
4. Установите необходимые пакеты с помощью команды npm install axios vue-router.
5. Создайте компоненты для авторизации, например, Login.vue, Register.vue, Dashboard.vue.

Шаг 3: Настройка маршрутизации и API

1. В файле app/Http/Kernel.php добавьте use LaravelSanctumHttpMiddlewareEnsureFrontendRequestsAreStateful; и 'api' => [ EnsureFrontendRequestsAreStateful::class, 'throttle:120,1', IlluminateRoutingMiddlewareSubstituteBindings::class, ], в protected $middlewareGroups.

2. В файле routes/api.php добавьте маршрут для получения токена Sanctum:

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

3. Создайте маршруты для авторизации в файле routes/web.php:

Route::view('/{any}', 'spa')->where('any', '.*');

4. Создайте файл resources/js/routes.js и добавьте маршруты:

import Vue from 'vue';
import VueRouter from 'vue-router';

import Login from './components/Login.vue';
import Register from './components/Register.vue';
import Dashboard from './components/Dashboard.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/login',
    component: Login,
    meta: { guestOnly: true },
  },
  {
    path: '/register',
    component: Register,
    meta: { guestOnly: true },
  },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { authOnly: true },
  },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.authOnly)) {
    if (!window.auth) {
      return next('/login');
    }
    return next();
  }
  if (to.matched.some(route => route.meta.guestOnly)) {
    if (window.auth) {
      return next('/dashboard');
    }
    return next();
  }
  return next();
});

export default router;

5. В файле resources/js/app.js добавьте следующий код для работы с Sanctum, маршрутизации и хранилища:

import Vue from 'vue';
import App from './components/App.vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import router from './routes';

axios.defaults.withCredentials = true;

Vue.use(VueAxios, axios);

Vue.router = router;

Vue.prototype.$auth = window.auth;

Vue.component('app', App);

const app = new Vue({
  el: '#app',
  router,
});

Шаг 4: Настройка компонентов Vue

1. В компоненте Login.vue добавьте метод для отправки запроса на авторизацию:

methods: {
  login() {
    axios.post('/login', {
      email: this.email,
      password: this.password,
    })
      .then(response => {
        // Успешная авторизация
        this.$router.push('/dashboard');
      })
      .catch(error => {
        // Ошибка авторизации
      });
  },
},

2. Добавьте метод для получения данных пользователя в компоненте Dashboard.vue:

created() {
  this.$axios.get('/api/user')
    .then(response => {
      // Получение данных пользователя
      this.user = response.data;
    })
    .catch(() => {
      // Ошибка получения данных пользователя
    });
},

3. Добавьте кнопку выхода в компоненте Dashboard.vue:

methods: {
  logout() {
    axios.post('/logout')
      .then(response => {
        // Успешный выход из системы
        this.$router.push('/login');
      })
      .catch(error => {
        // Ошибка при выходе из системы
      });
  },
},

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

1. Запустите миграции базы данных с помощью команды php artisan migrate.
2. Запустите Laravel сервер с помощью команды php artisan serve.
3. В другом терминале перейдите в директорию frontend-части (cd project-name) и запустите приложение Vue командой npm run serve.
4. Откройте браузер и перейдите по URL http://localhost:8080 (либо другой адрес, который вы указали в настройках Vue CLI).

Теперь у вас должно быть полностью рабочее авторизационное приложение Laravel + Sanctum + Vue (SPA).