How to get auth token automatically in laravel and vue?

Question

I am using laravel passport for authentication in my laravel and vue.js ecommerce project.

After successful login, I want to redirect user to his/her dashboard.

Here is the vue dashboard page:

<template>
  <div class="content-center">
    <h1>Dashboard my account</h1>
    <p>
        {{userData.name}}
    </p>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  data() {
    return {
      userData: "",
      authToken: ""
    }
  },
  async beforeMount() {
    let res = await Axios.get("http://localhost:8000/api/user-details", {
      headers: {
        Authorization: "Bearer " + this.authToken, 
        Accept: 'application/json'
      },
       
    });
     this.userData = res.data;
     
    //  let token = await Axios.get("http://localhost:8000/api/user-login")
    //   this.authToken = res.data.data.auth_token
    //let res = await Axios.get("http://localhost:8000/api/user-details");
    
  },
};
</script>

Everytime I login to different user accounts, I have to set the value of authToken manually copy and pasting from Postman. I want to set this token automatically when a user logs in. How can I do this ?

Here is my api controller:

class AuthApiController extends Controller
{
    public function userDetails(){
        return auth()->user();
    }
    public function login(Request $request){
            
        $user = User::where('email',$request->email)->first();
        if (!$user || !Hash::check($request->password, $user->password)) {
            return response()->json([
                'success'=>false,
                'data'=>[],
                'message'=>'Login failed',
                'errors'=>[]
            ]);
        }else{
            return response()->json([
                'success'=>true,
                'data'=>['user'=> $user, 'auth_token' =>  $user->createToken('AuthToken')->accessToken],
                'message'=>'Login success',
                'errors'=>[]
            ]);
           
        }
        
    }

Updates:

dashboard.vue

<template>
  <div class="content-center">
    <h1>Dashboard my account</h1>
    <p>
        {{userData.name}}
    </p>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  data() {
    return {
      userData: "",
      authToken: ""
    }
  },
  async beforeMount() {
    let res = await Axios.get("http://localhost:8000/api/user-details", {
      headers: {
        Authorization: "Bearer " + this.authToken, 
        Accept: 'application/json'
      },
       
    });
     this.userData = res.data;
     
     let token = await $api.get("http://localhost:8000/api/user-login")
      this.authToken = res.data.data.auth_token
    
    
  },
};
</script>

Picture:

enter image description here

What should I write to import api.js ?

import $api from ./../api.js or anything else ?

Rakesh K · Accepted Answer · 2021-08-28 18:39:11Z

1

Well, you can store your token in LocalStorage. And whenever you request just get it from the local storage and pass it to the request header.

If you are using Axios then you can use interceptors and just intercept your every request and pass token in the header.

Step 1.

Create a file called api.js or you can call it whatever you want.

Step 2.

Create an Axios instance in the api.js file.

import axios from 'axios';

// Put your backend url here
export const API_URL = `http://localhost:5000/api`

const $api = axios.create({
    withCredentials: true,
    baseURL: API_URL
})

$api.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
    return config;
})


export default $api;

Step 3: Where ever you are using Axios use this exported instance so in your component you would do like this:

const userdata = await $api.get("http://localhost:8000/api/user-details");

Here you can see, we are using the $api Axios instance which we created in the api.js file instead of Axios direct.

Add also don't forget to store your token in your local storage when you getting that.

localStorage.setItem('token', "Your token goes here...");

I hope this will give you an idea.

This way, Token will be sent with every request automatically, if it exists in the localStorage.

UPDATE:

<template>
  <div class="content-center">
    <h1>Dashboard my account</h1>
    <p>
        {{userData.name}}
    </p>
  </div>
</template>
<script>
// import Axios from "axios";
   import $api from 'put relative path of your api.js file'

export default {
  data() {
    return {
      userData: "",
      authToken: ""
    }
  },
  async beforeMount() {
    let res = await $api.get("/user-details");
     this.userData = res.data;
     
     let res = await $api.get("/user-login")
      localStorage.setItem('token', res.data.data.auth_token);        
  },
};
</script>

edited Aug 28, 2021 at 18:39

answered Aug 28, 2021 at 17:55

Rakesh K

1,3301 gold badge18 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Tanjib Rubyat Over a year ago

where is the local storage located ? What is local storage ?

Rakesh K Over a year ago

Local storage is located in every browser.

Tanjib Rubyat Over a year ago

Its difficult to understand. How can I call the api directly without using api.js ?

Rakesh K Over a year ago

you will have to import it in component. import $api from 'your api.js file path here' Then use.

Tanjib Rubyat Over a year ago

I have updated my post. Please check if its correct.

|

Collectives™ on Stack Overflow

How to get auth token automatically in laravel and vue?

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related