Laravel Websanova/Vue-Auth Login/Register 返回未定义 URL

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

所以,我正在学习如何使用 Laravel 和 Vue.js 创建单页应用程序,我发现了这个 tutorial。我遵循了一切,我没有改变任何东西,但我总是得到这个 undefined 每当我愿意 login/register

我已经对所有内容进行了三重检查。

图像显示 http://127.0.0.1:8080/undefined/api/auth/login - https://imgur.com/LfpiMvS

代码如下:

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>

有人可以向我解释一下这里发生的事情吗?

谢谢!

我预计 url 会是 http://127.0.0.1:8080/api/auth/login

原来我的错误来自于我的app.js,代码是:

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

我改成后:

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

成功了,未定义的东西现在不见了。我不知道为什么第一个不起作用但是嗯。

Reddit 用户 /u/mrcat323 帮助我在 /r/vuejs 中得到了答案。

我在 URL 中的 undefined 部分遇到了类似的问题。

原因是我的 .env Laravel 配置文件中没有设置 MIX_APP_URL 变量。 ${process.env.MIX_APP_URL} 的工作方式是 Node 可以在运行时注入环境变量,在本例中是应用程序 url.

我们希望在 .env 中使用 MIX_APP_URL 的一个原因是任何使用您的应用程序的开发人员都可以轻松设置它,并且只需修改 MIX_APP_URL 变量。

另一个非常重要的原因是 URL 对于本地服务器和生产环境不同 - 在这种情况下,将其更改为静态的解决方案URL 将无法正常工作,并且在生产环境中容易出错。

但要注意一件事,当 运行 NPM watch 任务时,.env 变量的更改不会立即应用,watch 任务 必须重新启动