How Do I Get a JWT Authentication Token in Vue.js to Submit Form Data to "WordPress Contact Form 7" Endpoint via Axios?

Viewed 437

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')
0 Answers
Related