401 (Unauthorized) (Vuejs, Laravel, and Passport)

Hello friend, i’m a junior web dev, currently i’am learn front end ( vuejs with vuetify ).
i need help because i’m get problem / error when get data use API Passport,

my back end is laravel and i’am use Passport to set API,

My Error!

POST http://api.rumaholi.local/api/post 401 (Unauthorized)
createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 401
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:18)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:77)

My code like below:

let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjYzZDc4OWExZjdjOTIzYTZkYjAxOTUwZDJjYjljOWZmYzk2Y2FkZDRlNmMzMzZmMzQ0Y2RkNmM5NTVjN2Q5MzE5YWZmMmQ0MDhlYzhmYjE3In0.eyJhdWQiOiIxIiwianRpIjoiNjNkNzg5YTFmN2M5MjNhNmRiMDE5NTBkMmNiOWM5ZmZjOTZjYWRkNGU2YzMzNmYzNDRjZGQ2Yzk1NWM3ZDkzMTlhZmYyZDQwOGVjOGZiMTciLCJpYXQiOjE1NTMyMzk3MDgsIm5iZiI6MTU1MzIzOTcwOCwiZXhwIjoxNTg0ODYyMTA4LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.MklLt1aIaQ90KFK-IrZZsn_zJ1HxRtZVvRthTF5IVxpdjjFvqE0R9cdRVh2itTSH8-9lRN_BpUcmgnpf6DAWQa654hcA66Oxtl46VQeNH6B304T16hGrZR8KsO6pub5M2We2_TxARNCFDPOsYZ4D9O-XVtiOLjSVFMuJtle1qYKZDScXF7f2hQDQLk1bNhehBJ7bJ_NeJVrTuiOivxjr9jPcC61hzk2fdRHNOJc4T3f5dnrqqHwDW-jHb41wAffaCv9b_3LrTN2kNqDRxue2ApHg8jivRslp6UqRfnXICpxnooRY-t5LtQhfH5QKJTLVLBrsCCwJVsu9V7iYc_UA_Bk7G-fMVa7jY81OnhArrOLpMqUcbhOrx_RFohjg2DhcxJgKdrhsRtriilMwWv_ws1Pse7nk0-CeS3XGPUrMsC5vZpA734yeB9EF2HqaZ3HqOns33ABEwM3wlkTShxpFbPQ_WFOHxF8BhHErw1QoTF6IHldSOH5EuqCvEAhT5yPcF6S0zcjxjoouARdNLK9S4dSxKLcROJKbv5wqMUUAZH1MtnT7o2C3Tn-ox9T5SV1nf2SBjgAJNq7FDAeUQnrILEVvyhpb3CTHnCVuvZ84w-S6EPWGuDNNC3AU77dkw4woLzugjYv9V-5wGudzyb2jOmXOem79p1LcuFlRtP2Gi';
                
axios.post("http://api.rumaholi.local/api/post", {headers: { 'Authorization' : 'Bearer '+ token}}).then(response => {
                    this.comments = response.data;
                    console.log(response.data)
                })

someone can help ?

Regards,
-Junior Dev-

Solved

    axios.post("http://api.rumaholi.local/api/post", [], {headers: { 'Authorization' : 'Bearer '+ token}}).then(response => {
                        this.comments = response.data;
                        console.log(response.data)
                    })

I would axios.get() as you just receive data, post should be used when creating new data. You will need to adjust the backend too.

1 Like

Thank you sandro your response,

By default laravel passport if you want GET or POST data, you should use axios.post() and token.
I don’t know, whether Laravel passport can use axios.get() or not. i always try but always error 401.

if you have an example axios.get() and passport laravel please share.

It can. You just need to add the CreateFreshApiToken middleware so you don’t have to send the access token with each request. It attached an encrypted laravel_token cookie to your requests which will be used to authenticate each request.

https://laravel.com/docs/5.8/passport#consuming-your-api-with-javascript

i should learn it, Thanks for your information James :pray::pray: