CODEWITHSUNDEEP
node.jslaravelvue.jslaravel-passport
Ahmad Okaily
Ahmad Okaily

Reputation: 94

laravel vuejs vuetable-2 (unauthenticated)

First I tried all the solutions in here and others in the internet

What I have tried in here:

Vuetable-2 not working with Laravel Passport

Unable to retrieve data from using vuetable-2, in Vuejs 2

The Problem: I was working on a project (Larave + VueJs) and using (passport) for laravel auth and (vuetable-2) to viewing data in table, the project was left for 2 years, And I format my PC a week ago.

Now I need to work on the project again , so installed NodeJs and called npm install Also removed some (deprecated) libraries as npm console said, And now I got my project to work again, But the problem now is when vuetable-2 try to get data from controller using api-url, It was working flowless when I was working on project (2 years ago). I don't know what changed now, maybe installing new NodeJs? or npm install command? or i used other command that caused something?

Important Note: when using axios directly using my own function , it works,

axios.get("/api/devices").then((data) => {
    console.log("----------------- data---------------");
    console.log(data.data);
  });

but when vuetable call the same url , it gives (unauthenticated)

My Code:

<vuetable
    ref="vuetable"
    api-url="/api/devices"
    :fields="fields"
    pagination-path
    :css="css.table"
    :sort-order="sortOrder"
    :multi-sort="true"
    detail-row-component="my-detail-row"
    :append-params="moreParams"
    @vuetable:cell-clicked="onCellClicked"
    @vuetable:pagination-data="onPaginationData"
></vuetable>

In Controller:

public function __construct()
{
    $this->middleware('auth:api');
}

What I have tried:

1.

Added this to vuetable :http-options="{ headers: { 'x-access-token' : csrf_token } }"

Which csrf_tkoen defined in (data) as csrf_token : document.head.querySelector('meta[name="csrf-token"]'),

2.

Changed http-options to httpOptions: { headers: { Authorization: this.csrf_token } },

Also tried to httpOptions: {headers: {'X-Requested-With': 'XMLHttpRequest' ,Authorization: this.csrf_token}},

3. Adding :http-fetch="myFetch" to vuetable , and to methods

myFetch(apiUrl, httpOptions) {
            return axios.get(apiUrl, httpOptions)
},

But so far nothing works.

So if You can help me with this issue I'll be so thankful.

Thanks in advance

Edit:

I compared between Vuetable-2 call (header) and axios , and found out that axios send auth parameter

X-XSRF-TOKEN: eyJpdiI6ImxkVmxjUkw.....

Although I didn't send it manually with axios

But vuetable-2 don't

maybe this means something

Upvotes: 0

Views: 185

Answers (1)

Ahmad Okaily
Ahmad Okaily

Reputation: 94

Found the solution

For any one who will counter this issue the solution for me was adding this line

headers:{ 'X-CSRF-TOKEN': window.Laravel.csrfToken },

in data() like this :

data() {
    headers:{ 'X-CSRF-TOKEN': window.Laravel.csrfToken },
}

then in vuetable add this line like this:

<vuetable
    :http-options="headers"
>
</vuetable>

hope it helps anyone

Regards

Upvotes: 1

Related Questions