Laravel Websanova/Vue-Auth Login/Register Returning Undefined URL

Question

So, I'm learning how to create Single Page Applications using Laravel & Vue.js, and I found this tutorial. I followed everything, I didn't change anything but I keep getting this undefined whenever I will login/register

I've double-triple checked everything.

Image showing the http://127.0.0.1:8080/undefined/api/auth/login - https://i.sstatic.net/hCOn5.jpg

Here's the code:

Auth.js

import bearer from '@websanova/vue-auth/drivers/auth/bearer'
import axios from '@websanova/vue-auth/drivers/http/axios.1.x'
import router from '@websanova/vue-auth/drivers/router/vue-router.2.x'
// Auth base configuration some of this options
// can be override in method calls
const config = {
auth: bearer,
http: axios,
router: router,
tokenDefaultName: 'recipe-lists',
tokenStore: ['localStorage'],
rolesVar: 'role',
registerData: {url: "auth/register", method: 'POST', redirect: '/login'},
loginData: {url: "auth/login", method: 'POST', redirect: '/', fetchUser: true},
logoutData: {url: "auth/logout", method: 'POST', redirect: '/', makeRequest: true},
fetchData: {url: "auth/user", method: 'GET', enabled: true},
refreshData: {url: "auth/refresh", method: 'GET', enabled: true, interval: 30}
}
export default config

api.php

Route::prefix('auth')->group(function () {
Route::post('register', 'Auth\AuthController@register');
Route::post('login', 'Auth\AuthController@login');
Route::get('refresh', 'Auth\AuthController@refresh');
Route::group(['middleware' => 'auth:api'], function(){
Route::get('user', 'Auth\AuthController@user');
Route::post('logout', 'Auth\AuthController@logout');
});
});

login.vue

<script>
export default {
data() {
return {
email: null,
password: null,
has_error: false,
isProcessing: false,
}
},
methods: {
login() {
// Get the redirect object
this.isProcessing = true
var redirect = this.$auth.redirect()
this.$auth.login({
body: {
email: this.email,
password: this.password
},
success: function() {
// Handle Redirection
const redirectTo = redirect ? redirect.from.name : this.$auth.user().role === 2 ? 'admin.dashboard' : 'dashboard'
this.$router.push('/')
},
error: function() {
this.has_error = true
},
rememberMe: true,
fetchUser: true
})
}
}
}
</script>

Can someone explain to me what's happening pretty noob here.

Thank you!

I expected the url to be http://127.0.0.1:8080/api/auth/login

Jacobs · Accepted Answer · 2020-04-07 17:08:16Z

3

I've faced a similar problem with the undefined part in URL.

The reason was that I did not have the MIX_APP_URL variable set up in my .env Laravel configuration file. The way ${process.env.MIX_APP_URL} works is that an environment variable can be injected by Node at runtime, in this case the application url.

One reason we want the MIX_APP_URL in .env is that any developer using your application can easily set it up and only modify the MIX_APP_URL variable.

The other, very important reason is that the URL will differ for a local server and for production - in this case the solution to change it to a static URL would not work and would be prone to an error in a production environment.

One thing to notice though, when running the NPM watch task, the change of an .env variable does not apply immediately, the watch task has to be restarted.

edited Apr 7, 2020 at 17:08

answered Apr 6, 2020 at 18:57

Jacobs

464 bronze badges

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

Comments

Ronron Asistores · Accepted Answer · 2019-07-10 06:32:18Z

1

It turns out my error was from my app.js, the code is:

axios.defaults.baseURL = `${process.env.MIX_APP_URL}/api`

After I changed it to:

axios.defaults.baseURL = `http://127.0.0.1:8000/api`

It worked, the undefined thingy is now gone. I didn't know why the first one didn't work but meh.

Reddit user /u/mrcat323 helped me get an answer in /r/vuejs.

edited Jul 10, 2019 at 6:32

answered Jul 10, 2019 at 5:57

Ronron Asistores

508 bronze badges

1 Comment

Amir Ur Rehman Over a year ago

Did you find out why the first option is not working?

Collectives™ on Stack Overflow

Laravel Websanova/Vue-Auth Login/Register Returning Undefined URL

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related