Я делаю СПА с логином, используя Laravel + Vue. Я делаю axios запросы к контроллерам для аутентификации / входа в систему, которые Laravel имеет по умолчанию.
Пока у меня нет модуля регистрации, поэтому я просто добавил пользователя вручную в базу данных MySQL, однако это всегдавозвращая «Запрос прерван» в веб-консоли после нажатия кнопки входа в систему, я не знаю, почему это происходит
Login.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="page-header">
<h2>Vue Laravel Auth Login</h2>
</div>
<div class="col-md-12 text-center">
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul class="list-group">
<li v-for="error in errors" class="list-group-item list-group-item-danger" :key="error">{{ error }}</li>
</ul>
</p>
</div>
<div class="col-md-6" v-if="loginfalse = true">
<form @submit="checkForm" id="createAdministrator">
<div class="form-group">
<label for="email">Email address:</label>
<input v-model="email" type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input v-model="password" type="password" class="form-control" id="password" placeholder="********" name="password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data() {
return {
errors: [],
email: '',
password: ''
}
},
methods:{
checkForm: function (e) {
this.errors = [];
if (!this.email) {
this.errors.push('Email required.');
}
if (!this.password) {
this.errors.push('Password required.');
}
else{
const params = {
email: this.email,
password: this.password
};
this.email = '';
this.password = '';
axios.post('/vuelogin', params)
.then(res => {
alert('Nota añadida con éxito');
})
}
}
}
}
</script>
LoginController.php
public function vuelogin(Request $request)
{
if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){
$user = Auth::user();
$username = $user->name;
return response()->json([
'status' => 'success',
'user' => $username,
]);
} else {
return response()->json([
'status' => 'error',
'user' => 'Unauthorized Access'
]);
}
}
Маршруты (web.php)
Route::get('/{any}', 'mainpage\LandingController@index')->where('any', '.*');
Auth::routes();
Route::post('/vuelogin', 'Auth\LoginController@vuelogin');
Route::get('/home', 'HomeController@index')->name('home');
rout.js (из vueRouter)
import Home from './views/Home.vue';
import Faq from './views/Faq.vue';
import Login from './views/Login.vue';
import Register from './views/Register.vue';
import Dashboard from './views/Dashboard.vue';
import Services from './views/Services.vue'
import Example from './components/ExampleComponent.vue';
export const routes = [
{
path: '/',
component: Home,
name: 'home'
},
{
path: '/faq',
component: Faq,
name: 'Faq'
},
{
path: '/login',
component: Login,
name: 'Login',
meta:{
auth: false
}
},
{
path: '/register',
component: Register,
name: 'Register',
meta: {
auth:false
}
},
{
path: '/dashboard',
component: Dashboard,
name: 'Dashboard',
meta: {
auth: true
}
},
{
path: '/services',
component: Services,
name: 'Services'
}
];