The Holy Alliance of Laravel and Vue

I am facing issues with user authentication using Laravel Sanctum. I have set up everything properly, with Vite and Vue 3 as the frontend. The problem arises when I attempt to login with Laravel's default auth - it works fine. However, when I make a request from the Vue frontend like this:

const AxiosInstance = axios.create({
            headers: {
                Accept: "application/json",
                "Access-Control-Allow-Origin": "*",
                "Content-Type": "application/json",
                "X-Requested-With": "XMLHttpRequest",
            },
            baseURL: "http://127.0.0.1:8000/",
            withCredentials: true,
        });

The actual issue arises when I try to fetch the user data, it always returns Unauthenticated:

const user = async() => {
            await AxiosInstance.get('api/user')
        }

Even though the user is created directly from axios, it remains unauthenticated. I have checked if the user is logged in, and Laravel recognizes it with something like:

        @guest
            <h1>Welcome guest</h1>
        @else
            <h1>Welcome user</h1>
        @endauth

But why is 'api/user' route not authenticated?

Answer №1

The reason behind Laravel Sanctum using Bearer token is for authentication purposes.

To modify your Axios instance, follow these steps:

import axios from "axios";

const token = localStorage.getItem('auth_token')
 const api = axios.create({
    baseURL: 'http://127.0.0.1:8000/api/v1/',
    timeout: 1000,
    headers: {
        'Accept': 'application/json',
        'Authorization': `Bearer ${token}`
      }
  });

  export default api

I believe this solution will be beneficial to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving checkbox list values using jQuery

I am working with a div that contains some checkboxes. I want to write code so that when a button is clicked, it will retrieve the names of all the checked checkboxes. Can you provide guidance on how to achieve this? <div id="MyDiv"> .... <td> ...

Enhancing the camera functionality of the HTML <input> tag for iPhone and Android devices

I am currently working on a mobile web application that requires access to the device's camera. I am aware that this can be achieved using the following code: <input type="file" accept="image/*" capture="camera" /> The code snippet above suc ...

Customizing Bootstrap Vue to prevent tooltips from opening on hover

I am currently using a tooltip similar to the example shown on Toggle Tooltip: <template> <div class="text-center"> <div> <b-button id="tooltip-button-1" variant="primary">I have a tooltip</b-button> </div& ...

Typescript Tooltip for eCharts

I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...

Update a document by removing elements from an array where the objects are of a certain value

I am trying to remove specific tweet objects from the timeline list within the user model. The tweets I want to remove are those authored by a user with a matching id user._id. I attempted the following approach: router.get("/follow/:userId", is ...

Storing the profile data of the authenticated user in a Laravel view: a step-by-step guide

I am currently working on a project to familiarize myself with Laravel. In this project, I have set up a database containing user profiles with information such as city and country. The 'profiles' table I created includes columns for id, user_id ...

What is the process for attaching an iterator to the name value of every element within a cloneNode?

Consider the following scenario: <div id="addNewMenuElementPart2"> Numerous elements with a name attribute are present here. </div> <div id="addNewMenuElementPart3Optional"></div> Additionally, t ...

Issue with displaying options in Angular2 v2.4.9 HTML select element

Ever since I made the transition from AngularJS to Angular2, I've been facing a peculiar issue. The select element's options data is fetched from a Solr query, which always returns a 200 response with the data in a timely manner. However, the pr ...

Axios encounters a problem: Unable to access the property '$get' as it is undefined

Find the code on github: https://github.com/aurora10/amazone-clone.git Attempting to use Axios to communicate with an API is resulting in the following error: The console shows a NUXT SSR error: TypeError: Cannot read property '$get' of undefi ...

What is the best way to convert JavaScript to JSON in Python programming?

I encountered a situation where I have an HTML page that contains a lengthy product list, making it too large for me to upload. The products are stored within the script section of the page, specifically in one variable. Initially, I mistook this data for ...

How can I use JavaScript and HTML to print a canvas that is not within the print boundaries?

As someone who is new to javascript, I recently created a canvas function that allows me to successfully print. However, I am encountering an issue with printing large canvas areas. When I navigate to the further regions of the canvas and try to print, i ...

Saving categories in Laravel 5.7 using Vue.js: A step-by-step guide

Currently, I am utilizing Laravel 5.7 in conjunction with vuejs to showcase the parent_id from a MySQL table containing categories. My objective is to retrieve the name and gather all child categories associated with it regardless of their parent category. ...

Is it possible to display a pdf.js page as actual HTML elements rather than as canvas or SVG?

I am in the process of creating a user-friendly mobile interface for pdf reading. However, I want to incorporate more advanced features by developing my own pdf reader instead of relying on the pdf.js team's viewer. Is there a method available to rend ...

Preventing Angular $rootElement.on('click') from affecting ReactJS anchor tag interactions

Running both AngularJS and ReactJS on the same page has caused an issue for me. Whenever I click on a ReactJS <a> tag, Angular's $rootElement.on('click) event is triggered and the page redirects. I need to perform some functionality in Re ...

Updating URL on tab selection in Angular Bootstrap Tabs

I am incorporating Bootstrap's Tabs into my project and I want the URL to change when a tab is clicked. For example: /home/first /home/second Unfortunately, I am struggling to make this work properly. Here is the code snippet from my $routeProvider: ...

The value on the input of a custom Vue component does not update as expected when using v

I'm currently working on a custom component called customCombobox. It functions similarly to a regular v-combobox, but with an added feature - after the user presses the tab key, it automatically selects the first option available. Everything in my i ...

Modify the layout of the date selector to display weekdays instead - material ui

How can I change the datepicker format to display weekdays (Monday, Tuesday,..) instead of MM/dd/yyyy? Currently, the datepicker is set up with the format format="MM/dd/yyyy". Would it be possible to modify this? Here is the source code: <MuiPickers ...

Use either Jquery or CSS3 to hide a div if one of its inner divs is empty

I have multiple data sets to display in divs with the same class name. Each div contains two inner divs. <div class="div1"> <div class="div2">Abc</div> <div class="div3"><?php echo $row['SOME VALUE']; ?>< ...

Struggling to retrieve information from a JSON file and display it within a component?

After accessing the JSON data and storing the necessary values in a dictionary named details, I am encountering an issue where the values are displayed when console logged from inside the function but appear as undefined when console logged in the parent f ...

Errors related to missing RxJS operators are occurring in the browser, but are not showing up in Visual Studio

Recently, I encountered a peculiar problem with my Angular4 project, which is managed under Angular-CLI and utilizes the RxJS library. Upon updating the RxJS library to version 5.5.2, the project started experiencing issues with Observable operators. The s ...