Есть ли простой способ сделать SPA-аутентификацию в Vue.js + Laravel без использования JWT?

Question

Я создаю приложение в Laravel + Vue.js. У меня есть несколько готовых представлений, я хотел сделать это SPA, и я узнал об аутентификации JWT, но у меня было много проблем с его реализацией, и я нахожу его слишком сложным (вы должны изменить слишком много вещей накод, сделать много обещаний и прочее, я все еще не понимаю).

Когда вы впервые создаете приложение в Laravel, вы выполняете команду в консоли, которая автоматически создает вам модуль входа в систему / регистрации / выхода из системы, есть ли способ, которым я могу реализовать это с помощью Vue (используя маршрутизатор, axios или любой другой) так что мне не нужно использовать JWT?

Answer 1

Да, это будет означать создание дополнительного столбца в вашей таблице users, в котором вы будете сохранять пользовательские токены. Хотя это не является оптимальным.

Поскольку эти токены необходимы для выполнения запросов GET, POST, CREATE и DELETE, вам придется добавить token в качестве второго параметра длявсе api запросов.

Ниже приведен пример code

Для моего auth я использовал аутентификацию по умолчанию, с которой поставляется Laravel, то есть пользователь по умолчанию, перенаправленный в home.blade.php файл, который выглядит следующим образом

@extends('layouts.app')

@section('content')
    <App :user='{{ auth()->user() }}'></App>
    <!-- The :user has to be accepted as a prop in the App component -->
@endsection

В файле App.vue, который является макетом вашего SPA, вы можете сделать что-то вроде этого

<template>
   <div> 
       <router-view> </router-view> <!-- for all other components -->
   </div>
</template>

<script>

export default {
    name: "App",

    props: [
        'user'
    ],

    components:{

    },

    created(){
        window.axios.interceptors.request.use(
            (config) => {
                if(config.method === 'get'){
                    config.url = config.url + '?api_token='+ this.user.api_token;
                }else{
                    config.data = {
                    ...config.data,
                    api_token: this.user.api_token
                    }
                }


                return config;
            }
        )
    }

    //to set the api_token globally such that it does not need to be typed in eveywhere, we do it whe the component is created/mounted
    //let me know if it helps


}
</script>

<style>

</style>

Для вашего выхода,

<router-link to="/logout"> Logout </router-link>
//in your Logout component, you can have something like this

<template>
    <div>

    </div>
</template>

<script>
export default {
    name: 'Logout',

    created(){
        axios.post('/logout', {})
        .finally(err => {
            window.location = '/login';
        })
    }
}
</script>