Skip to content

Instantly share code, notes, and snippets.

@jakedohm
Last active March 22, 2019 22:57
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jakedohm/aeaa2d0ee1bc2cbeb30605cacbb34f35 to your computer and use it in GitHub Desktop.
Save jakedohm/aeaa2d0ee1bc2cbeb30605cacbb34f35 to your computer and use it in GitHub Desktop.
A Vue component to handle submitting login details with Axios, instead of with a standard HTML form
<template>
<form method="post" accept-charset="UTF-8">
<label for="loginName">Username or email</label>
<input v-model="loginName" id="loginName" type="text" name="loginName" />
<label for="password">Password</label>
<input v-model="password" id="password" type="password" name="password" />
<label>
<input v-model="rememberMe" type="checkbox" name="rememberMe" />
<span>Remember me</span>
</label>
<button @click.prevent="handleLogin">Login</button>
</form>
</template>
<script>
export default {
data() {
return {
loginName: '',
password: '',
rememberMe: true,
}
},
methods: {
handleLogin() {
// Build data object
const loginData = {
loginName: this.loginName,
password: this.password,
rememberMe: this.rememberMe ? 1 : 0,
action: 'users/login',
}
// NOTE: The following request using this.$axios assumes that you have your CSRF
// header and data serialization pre-configured as recommended in my article here:
// https://dev.to/jakedohm_34/using-axios-with-craft-and-vue-3ceb
// If you don't have that set up, you'll need to manually pass your CSRF token
// and serialize the loginData object.
// Send the request
this.$axios
.post('/', loginData)
.then(response => {
if (response && response.data && response.data.success === true) {
// Everything worked!
alert('Logged in!')
} else if (
response &&
response.data &&
response.data.errorCode === 'invalid_credentials'
) {
// Request went through, but the submitted credentials were wrong
console.log('Invalid Credentials')
}
})
.catch(error => {
// Something went wrong with the request.
// Could've been a CSRF issue, internet connection, who knows ¯\_(ツ)_/¯
console.error('Login failed: ', error)
})
},
},
}
</script>
@jakedohm
Copy link
Author

As mentioned in the code, the way the form is submitted in this Gist requires you to pre-configure Axios according to this guide: https://dev.to/jakedohm_34/using-axios-with-craft-and-vue-3ceb

If you haven't configured Axios to handle CSRF and serialization automatically, the following code should work as a replacement:

import { stringify } from 'qs'
import axios from 'axios'

// see Gist for login data object
const loginData = {}

loginData[window.csrfTokenName] = window.csrfTokenValue
axios.post('/', stringify(loginData))

The rest (the code above and below the Axios call) should work the same for both implementations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment