Как на Laravel + Vue на страницах реализовать проверку авторизации?

На Laravel + Vue для реализации проверки авторизации на страницах можно использовать несколько подходов. Рассмотрим два основных способа.

Первый способ - проверка авторизации на стороне сервера:
1. В Laravel определите маршрут, который будет проверять авторизацию пользователя. Например, можно создать маршрут '/api/user' для проверки текущего авторизованного пользователя.

Route::get('/api/user', function() {
    return Auth::user();
})->middleware('auth:api');

2. В Vue создайте сервисную функцию, которая будет делать запрос на данный маршрут и возвращать информацию о пользователе. Например, можно создать файл api.js в папке /src и добавить следующий код:

import axios from 'axios';

export function fetchUser() {
    return axios.get('/api/user')
        .then(response => response.data)
        .catch(error => console.log(error));
}

3. В компоненте Vue, где вы хотите проверить авторизацию, импортируйте функцию fetchUser и вызовите ее в методе mounted или created:

import { fetchUser } from '@/api';

export default {
    ...
    created() {
        fetchUser()
            .then(user => {
                // Проверка, авторизован ли пользователь
                if (user) {
                    // Авторизован, выполните необходимые действия
                } else {
                    // Пользователь не авторизован, выполняйте другие действия
                }
            });
    },
    ...
}

4. Компоненты Vue, которым требуется авторизация, могут быть скрыты по умолчанию и отображаться только при наличии авторизованного пользователя, например, с использованием директивы v-if:

<template>
    <div v-if="user">
        <!-- Контент, доступный только авторизованному пользователю -->
    </div>
    <div v-else>
        <!-- Представление для неавторизованного пользователя -->
    </div>
</template>

Второй способ - проверка авторизации на стороне клиента:
1. При авторизации пользователя через API Laravel, возвращайте токен доступа (например, JWT) как часть ответа на удачную аутентификацию.

if (Auth::attempt(['email' => $email, 'password' => $password])) {
    $user = Auth::user();
    $token = $user->createToken('app-name')->plainTextToken;
    return response()->json(['user' => $user, 'token' => $token]);
}

2. В компоненте Vue, где вы хотите проверить авторизацию, сохраните токен доступа в локальном хранилище браузера после успешного входа.

export default {
    ...
    methods: {
        login() {
            // Выполняете логику аутентификации и получаете токен
            ...
            // Сохраняете токен в локальном хранилище
            localStorage.setItem('access_token', token);
        }
    },
    ...
}

3. В компоненте Vue, который требует авторизации, проверяйте наличие токена доступа в локальном хранилище:

export default {
    ...
    created() {
        const token = localStorage.getItem('access_token');
        // Проверяете наличие токена и запрос пользователя по API Laravel
        if (token) {
            axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
            axios.get('/api/user')
                .then(response => {
                    // Проверка, авторизован ли пользователь
                    if (response && response.data) {
                        // Авторизован, выполните необходимые действия
                    } else {
                        // Пользователь не авторизован, выполняйте другие действия
                    }
                })
                .catch(error => console.log(error));
        } else {
            // Пользователь не авторизован, выполняйте другие действия
        }
    },
    ...
}

4. Как и в первом способе, компоненты Vue могут быть скрыты и отображаться только в случае наличия авторизованного пользователя, используя директиву v-if:

<template>
    <div v-if="user">
        <!-- Контент, доступный только авторизованному пользователю -->
    </div>
    <div v-else>
        <!-- Представление для неавторизованного пользователя -->
    </div>
</template>

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