[Vuejs]-Is there an easy way to make SPA auth in Vue.js + Laravel without using JWT?

by

0👍

Yes there is, It will mean creating an additional column in your users table where you will save user tokens. Although is is not optimal.

Because these tokens are required for performing GET, POST, CREATE and DELETE Requests, you will have to append the token as a second parameter for all api requests.

Below shows a sample code

For my auth, I have used the defaul auth that Laravel ships with which means a user is by default, redirected to home.blade.php file, that looks like this

@extends('layouts.app')

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

In the App.vue file, which is the layout of your SPA you can do somthing like this

<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>

For your logout,

<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>

Leave a comment