Feature: Add csrf settings for axios request

pinry-spa/src/components/utils/csrf.js

@@ -0,0 +1,37 @@
+import axios from 'axios';
+
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) {
+    return parts.pop().split(';').shift();
+  }
+  return null;
+}
+
+
+function getCSRFToken() {
+  return getCookie('csrftoken');
+}
+
+function csrfSafeMethod(method) {
+  // these HTTP methods do not require CSRF protection
+  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+}
+
+function setUpAxiosCsrfConfig() {
+  axios.interceptors.request.use(
+    (config) => {
+      if (!csrfSafeMethod(config.method.toUpperCase())) {
+        // eslint-disable-next-line no-param-reassign
+        config.headers['X-CSRFToken'] = getCSRFToken();
+      }
+      return config;
+    },
+    (error) => {
+      Promise.reject(error);
+    },
+  );
+}
+
+export default setUpAxiosCsrfConfig;

pinry-spa/src/main.js

@@ -3,11 +3,12 @@ import Vue from 'vue';
 import { VueMasonryPlugin } from 'vue-masonry';
 import App from './App.vue';
 import router from './router';
-
+import setUpAxiosCsrfConfig from './components/utils/csrf';
 
 Vue.config.productionTip = false;
 Vue.use(Buefy);
 Vue.use(VueMasonryPlugin);
+setUpAxiosCsrfConfig();
 
 new Vue({
   router,