How to resolve 401 unauthorized response in laravel using vue axios

Question

I am creating a simple CRUD operations in laravel by using Vue js along with vue axios and vue router. Routing is working fine as expected but the issue is when i have save the data by using axios the response i get is 401 unauthorized. I have protected my route just like this in web.php

Route::get('/{any}', function () {
    return view('posts');
  })->where('any', '.*')->middleware(['auth']);

And in api.php i have routes like this.

Route::post('/quiz/create-quiz-category', 'QuizCategoryController@store')->middleware(['auth']);

I am currently using laravel default auth system. Below is my vue component script code.

this.axios.post(uri, {post: this.post}, {
          headers: {
              'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value,
              'Accept' : 'application/json'
          }
        }).then((response) => {
        // this.$router.push({name: 'home'});
        });

I appreciate if someone tell me that what wrong with code, and i am not currently using any passport or jwt.

Thanks.

@BenjaminBeganović I have tried the above ticket solution, But now its simplet did not open page because of 404 error. — Bilal Ahmed
– Bilal Ahmed, Commented Sep 3, 2019 at 11:50
Auth middleware requires Authorization header with token present in it and the middleware in api.php will be auth.api — ankith vishwakarma
– ankith vishwakarma, Commented Sep 4, 2019 at 8:44
Thanks i will try the best possibility and let you guys know. — Bilal Ahmed
– Bilal Ahmed, Commented Sep 4, 2019 at 11:45

Mahmoud-Morgan · Accepted Answer · 2020-04-17 15:36:50Z

0

api_token: this.user.api_token

         axios.post("http://foo",
         {headers: { 'Authorization' : 'Bearer '+ api_token}})
         .then(response => {
                    //action
                })

link: https://forum.vuejs.org/t/401-unauthorized-vuejs-laravel-and-passport/59770

or

       postComment() {
      axios.post('/api/posts/'+this.post.id+'/comment', {
        api_token: this.user.api_token,
        body: this.commentBox
      })

but make sure that you have "user.api_token"

edited Apr 17, 2020 at 15:36

answered Apr 16, 2020 at 23:23

Mahmoud-Morgan

214 bronze badges

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

Collectives™ on Stack Overflow

How to resolve 401 unauthorized response in laravel using vue axios

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related