CODEWITHSUNDEEP
phplaravelvue.jsaxios
Dran Dev
Dran Dev

Reputation: 519

Get returned data after posting with axios (vue+ laravel)

I wanted to create a custom login system with vue as my frontend, laravel handling the api, and axios as the controller between the two. I wanted to get the returned data from my AuthController. Here's my codes:

Vue:

export default {
name: 'Login',
data(){
    return {
        user_input: [
            {email: ''},
            {password: ''}
        ],
        csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    }
},
methods: {
    userLogin: function(){
        let params = Object.assign ({}, this.user_input)
        axios.post('/api/login/', params)
        .then(function(response){
            console.log(response.data)
        })
        .catch(function(error){
            console.log(error)
        })

    }
}
}

And in the AuthController:

public function login(Request $request) {
    return "Hey";
}

The output on the console is this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="40lajOfdWdmIQ1yP49dyeyToidT79CntGyHqrNRD">
<link rel="stylesheet" href="/css/app.css">
<title>VueComplete</title>
</head>
<body>
<div id="app">
    <App/>
</div>
<script src="http://vuecomplete.test/js/app.js"></script>
</body>

(This is basically my app.blade.php view).

why isn't it returning "Hey"?

I also tried:

public function login(Request $request) {
    return $request->email;
}

But it produced the same result. How can I fix this? Thanks a ton!

Update

I am using vue-router to create an SPA within laravel. In my routes (web.php) I have somewhat like this:

Route::get('/{any}', 'SPAController@index')->where('any','.*');

Which then in the controller:

public function index() {
    return view('app');
}

That's probably why it's returning the app.blade.php's entire html code.
Is there a way to access the api/login while still using vue-router's SPA capabilities?

Upvotes: 0

Views: 1423

Answers (2)

Dran Dev
Dran Dev

Reputation: 519

I solved it. On vue it was supposed to be api/login not /api/login or api/login/ or something.

Upvotes: 0

Salim Djerbouh
Salim Djerbouh

Reputation: 11044

Exclude api routes from the web route

Route::get('/{any}', 'SPAController@index')->where('any', '^(?!api).*$');

Hope this helps

Upvotes: 1

Related Questions