I'm building a headless WordPress site using vue.js.
I'm trying to submit form data to "Contact Form 7 Plugin" using this endpoint via Axios:
https://www.[my website address].com/wp-json/contact-form-7/v1/contact-forms/1234
I'm attempting to use JWT Authentication for the first time to submit contact form data to my "Contact Form 7" via the WordPress REST API. I followed several different tutorials and I'm a little confused. Most of the tutorials seem to show examples of how to check for a JWT token in local storage, and then use that token.. but I don't see anything at all about how to generate a new token if one doesn't exist..
From my understanding I need to hit this endpoint to get a token using a valid WordPress user's username and password. Like this:
https://www.[my website address].com/wp-json/jwt-auth/v1/token?username=admin&password=secretpassword
And then I need to store that token, as per my code example below, and then I can use it with Axios.. is that correct?
Most of the tutorials I've found so far use vuex and user registration examples, but my purposes are much simpler than that. I simply just need to get a token so that I can hit that endpoint with contact form data in away that WordPress will accept.
What do I need to do to make that happen?
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from 'axios'
// make Axios available everywhere..
Vue.prototype.$http = Axios;
// get the access token from local storage..
const accessToken = localStorage.getItem('access_token')
if (accessToken) {
//if we have a token attach it to every outgoing Axios request..
Vue.prototype.$http.defaults.headers.common['Authorization'] = accessToken
}
// so I think something is missing here?
// if there is no token already generated in localStorage
// then how do I get a new token?
new Vue({
router, // inject router
store, // local storage?
render: h => h(App),
}).$mount('#app')