I spent nearly whole day to figure out what's going on. I have login vue component the email and password values need to be sent to server. But the Login controller is built in Fortify controller, so I don't know why I'm getting error 500 and error 422 (I get them different times, not the same time, but they are the only results that I get with my various experiments). I created js file for vuex storage methods and modules and used axios.post in module and this.$store.dispatch in login vue component.
Here's the important parts of code
Login.vue
<template>
<form>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<label>
<input type="email" v-model="email" name="email" class="form-control" placeholder="email">
</label>
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<label>
<input type="password" v-model = "password" name="password" class="form-control" placeholder="password">
</label>
</div>
<div class="row align-items-center remember">
<label>
<input type="checkbox">
</label>Remember Me
</div>
<div class="form-group">
<input type="submit" v-on:click.prevent="login" value="Login" class="btn float-right login_btn">
</div>
</form>
</template>
<script>
export default {
name: "Login",
data: () => {
return {
email: '',
password: ''
}
},
methods:{
login(){
this.$store.dispatch('users/login',{}, {email: this.email, password: this.password})
},
},
}
</script>
js/store/modules/users.js
export default {
namespaced: true,
state: {
user:{}
},
getters: {
user(state) {
return state.user
}
},
mutations: {
user(state, user) {
state.comment = user
}
},
actions:
{
login(emailData,passwordData) {
axios.post('/login',{
'email': emailData, 'password': passwordData}
).then(response => {
if (response.status === 201) {
console.log('login')
} else {
console.log(response.data)
}
}).catch(error => {
console.log('oops')
});
},
}
}
js/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import comments from "./modules/comments";
import users from "./modules/users";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
comments,
users
}
})
js/app.js
import './bootstrap'
import Vue from 'vue'
import {router} from './routes/index'
import App from './components/App.vue';
import store from './store/index'
window.Vue = Vue
const app = new Vue({
el:'#app',
router,
store,
render: h => h(App)
});
I have suspicions that my problem is in not correct understanding of js syntax, or the needed way of passing data as parameters to methods axios.post() and this.$store.dispatch(). But anyway. I don't know what to do. When I was using blades instead of vues, it was very easy to do login action, but with vue js, vuex I ran into difficulties.
One of the errors, copied from my mozilla browser
{
"message": "Array to string conversion",
"exception": "ErrorException",
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\app\\Providers\\FortifyServiceProvider.php",
"line": 40,
"trace": [
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\app\\Providers\\FortifyServiceProvider.php",
"line": 40,
"function": "handleError",
"class": "Illuminate\\Foundation\\Bootstrap\\HandleExceptions",
"type": "->"
},
{
"function": "App\\Providers\\{closure}",
"class": "App\\Providers\\FortifyServiceProvider",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Middleware\\ThrottleRequests.php",
"line": 85,
"function": "call_user_func"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Middleware\\ThrottleRequests.php",
"line": 55,
"function": "handleRequestUsingNamedLimiter",
"class": "Illuminate\\Routing\\Middleware\\ThrottleRequests",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Routing\\Middleware\\ThrottleRequests",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\VerifyCsrfToken.php",
"line": 78,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\VerifyCsrfToken",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\View\\Middleware\\ShareErrorsFromSession.php",
"line": 49,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\View\\Middleware\\ShareErrorsFromSession",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Session\\Middleware\\StartSession.php",
"line": 121,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Session\\Middleware\\StartSession.php",
"line": 64,
"function": "handleStatefulRequest",
"class": "Illuminate\\Session\\Middleware\\StartSession",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Session\\Middleware\\StartSession",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Cookie\\Middleware\\AddQueuedCookiesToResponse.php",
"line": 37,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Cookie\\Middleware\\AddQueuedCookiesToResponse",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Cookie\\Middleware\\EncryptCookies.php",
"line": 67,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Cookie\\Middleware\\EncryptCookies",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 103,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 697,
"function": "then",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 672,
"function": "runRouteWithinStack",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 636,
"function": "runRoute",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 625,
"function": "dispatchToRoute",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
"line": 166,
"function": "dispatch",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 128,
"function": "Illuminate\\Foundation\\Http\\{closure}",
"class": "Illuminate\\Foundation\\Http\\Kernel",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest.php",
"line": 21,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TrimStrings.php",
"line": 40,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\TrimStrings",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize.php",
"line": 27,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\PreventRequestsDuringMaintenance.php",
"line": 86,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\PreventRequestsDuringMaintenance",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\fruitcake\\laravel-cors\\src\\HandleCors.php",
"line": 38,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Fruitcake\\Cors\\HandleCors",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Http\\Middleware\\TrustProxies.php",
"line": 39,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\\Http\\Middleware\\TrustProxies",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 103,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
"line": 141,
"function": "then",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
"line": 110,
"function": "sendRequestThroughRouter",
"class": "Illuminate\\Foundation\\Http\\Kernel",
"type": "->"
},
{
"file": "C:\\xampp\\htdocs\\dashboard\\test\\social_network\\public\\index.php",
"line": 52,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Kernel",
"type": "->"
}
]
}
Update:
Here's the code from FortifyServiceProvider.php
<?php
namespace App\Providers;
use App\Actions\Fortify\CreateNewUser;
use App\Actions\Fortify\ResetUserPassword;
use App\Actions\Fortify\UpdateUserPassword;
use App\Actions\Fortify\UpdateUserProfileInformation;
use Illuminate\Cache\RateLimiting\Limit;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\ServiceProvider;
use Laravel\Fortify\Fortify;
class FortifyServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Fortify::createUsersUsing(CreateNewUser::class);
Fortify::updateUserProfileInformationUsing(UpdateUserProfileInformation::class);
Fortify::updateUserPasswordsUsing(UpdateUserPassword::class);
Fortify::resetUserPasswordsUsing(ResetUserPassword::class);
RateLimiter::for('login', function (Request $request) {
return Limit::perMinute(10)->by($request->email.$request->ip());
});
RateLimiter::for('two-factor', function (Request $request) {
return Limit::perMinute(5)->by($request->session()->get('login.id'));
});
Fortify::loginView(function () {
return view('auth.login');
});
Fortify::registerView(function () {
return view('auth.register');
});
Fortify::twoFactorChallengeView(function () {
return view('auth.two-factor-challenge');
});
Fortify::verifyEmailView(function () {
return view('auth.verify-email');
});
}
}
CodePudding user response：
TL;DR
Update your login action to be:
action(context, payload) {
axios.post('/login', {
email: payload.email,
password: payload.password
}
)
.... // The rest of the code.
}
Alternatively, you could just use the payload as the data object for axios:
axios.post('/login', payload)
.then(...)
.catch(...)
Then update your dispatch call by removing the empty {}` as the 2nd argument:
this.$store.dispatch('users/login', {email: this.email, password: this.password})
I'm pretty sure the issue is your login action, both how you're calling it and how you're using the arguments.
An action with Vuex has the context as the 1st param (the object with things like state and commit) and then an optional 2nd param which takes the payload (the data you want to pass to it).
The dispatch method takes the name of the action as the 1st argument and an optional payload to pass to the action as the 2nd argument.
So, basically you're submitting the context object as the email property which will be turned into an array when it gets to the server, hence the error you're getting.