proposal-refactor-csrf-token.md

proposal.md

Before

<template>....</template>

<script>
export default {
  data(){
    return {
      user: {
        username: "",
        fullName: ""
      },
      successMessage: ""
    }
  },
  methods: {
    createUser() {
      let csrfMetaDOM = document.querySelector('meta[name="csrf-token"]');
      let csrfToken = "";
      if (csrfMetaDOM) {
        csrfToken = csrfMetaDOM.content;
      }
      fetch("/api/v1/users", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
          "X-CSRF-Token": csrfToken
        },
        body: JSON.stringify(this.user)
      })
        .then(response => response.json())
        .then(data => {
          this.successMessage = "Create user was successfully";
        });
    }
  }
};
</script>

After

export default class CSRFMeta {
  constructor() { }

  findToken() {
    let csrfMetaDOM = document.querySelector('meta[name="csrf-token"]');
    let csrfToken = "";
    if (csrfMetaDOM) {
      csrfToken = csrfMetaDOM.content;
    }
    return csrfToken;
  }
}

<template>....</template>

<script>
import CSRFMeta from "../lib/csrf_meta"; 
export default {
  data(){
    return {
      user: {
        username: "",
        fullName: ""
      },
      successMessage: ""
    }
  },
  methods: {
    createUser() {
      let csrfMeta = new CSRFMeta();
      let csrfToken = csrfMeta.findToken();
      fetch("/api/v1/users", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
          "X-CSRF-Token": csrfToken
        },
        body: JSON.stringify(this.user)
      })
        .then(response => response.json())
        .then(data => {
          this.successMessage = "Create user was successfully";
        });
    }
  }
};
</script>