From 69abf2d73870344725c34ea0c9e711ac30905611 Mon Sep 17 00:00:00 2001
From: Florent <florent@MacBook-Air-de-neogeo.local>
Date: Fri, 26 Nov 2021 09:03:18 +0100
Subject: [PATCH] add axios interceptor for csrf token
---
src/assets/js/map-util.js | 8 +-----
src/axios-client.js | 35 +++++++++++++++++++++++++++
src/services/map-api.js | 7 +-----
src/services/project-api.js | 7 +-----
src/store/index.js | 33 ++++++++++++-------------
src/store/modules/feature.js | 12 ++++-----
src/store/modules/feature_type.js | 12 ++++-----
src/store/modules/map.js | 12 ++++-----
src/views/feature/Feature_detail.vue | 12 ++++-----
src/views/feature/Feature_edit.vue | 12 ++++-----
src/views/feature/Feature_list.vue | 12 ++++-----
src/views/project/Project_detail.vue | 12 ++++-----
src/views/project/Project_edit.vue | 12 ++++-----
src/views/project/Project_members.vue | 8 +-----
14 files changed, 103 insertions(+), 91 deletions(-)
create mode 100644 src/axios-client.js
diff --git a/src/assets/js/map-util.js b/src/assets/js/map-util.js
index 8b6ed9b8..594050a5 100644
--- a/src/assets/js/map-util.js
+++ b/src/assets/js/map-util.js
@@ -4,15 +4,9 @@
import L from "leaflet"
import "leaflet/dist/leaflet.css";
import flip from '@turf/flip'
-import axios from "axios"
+import axios from '@/axios-client.js';
import "leaflet.vectorgrid";
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value != null) ? unescape(value[1]) : null;
-})('csrftoken');
-
import { FillSymbolizer, PointSymbolizer, LineSymbolizer } from "@/assets/js/vector_tile_fix.js";
let map;
diff --git a/src/axios-client.js b/src/axios-client.js
new file mode 100644
index 00000000..fa6b3d95
--- /dev/null
+++ b/src/axios-client.js
@@ -0,0 +1,35 @@
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+// Add a request interceptor
+axios.interceptors.request.use(function (config) {
+
+ config.headers['X-CSRFToken'] = (name => {
+ const re = new RegExp(name + "=([^;]+)");
+ const value = re.exec(document.cookie);
+ return (value != null) ? unescape(value[1]) : null;
+ })('csrftoken');
+
+ return config;
+
+ }, function (error) {
+ return Promise.reject(error);
+ });
+
+// Add a response interceptor
+axios.interceptors.response.use(function (response) {
+
+ response.headers['X-CSRFToken'] = (name => {
+ const re = new RegExp(name + "=([^;]+)");
+ const value = re.exec(document.cookie);
+ return (value != null) ? unescape(value[1]) : null;
+ })('csrftoken');
+
+ return response;
+
+ }, function (error) {
+ return Promise.reject(error);
+ });
+
+export default axios;
\ No newline at end of file
diff --git a/src/services/map-api.js b/src/services/map-api.js
index fa4c5ddb..f4b8f45e 100644
--- a/src/services/map-api.js
+++ b/src/services/map-api.js
@@ -1,11 +1,6 @@
-import axios from 'axios';
+import axios from '@/axios-client.js';
import store from '../store';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
diff --git a/src/services/project-api.js b/src/services/project-api.js
index b918ad22..f3d439cd 100644
--- a/src/services/project-api.js
+++ b/src/services/project-api.js
@@ -1,12 +1,7 @@
-import axios from 'axios';
+import axios from '@/axios-client.js';
import store from '../store'
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
diff --git a/src/store/index.js b/src/store/index.js
index 6f543f6d..326af958 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,4 @@
-const axios = require("axios");
-
+import axios from '@/axios-client.js';
import Vue from 'vue';
import Vuex from 'vuex';
import router from '../router'
@@ -7,26 +6,26 @@ import feature_type from "./modules/feature_type"
import feature from "./modules/feature"
import map from "./modules/map"
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
Vue.use(Vuex);
-axios.defaults.withCredentials = true; // * add cookies to axios
-function updateAxiosHeader() {
- axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
- })('csrftoken');
-}
-// ! À vérifier s'il y a un changement de token pendant l'éxécution de l'appli
-updateAxiosHeader();
+// axios.defaults.withCredentials = true; // * add cookies to axios
+// function updateAxiosHeader() {
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
+// }
+// // ! À vérifier s'il y a un changement de token pendant l'éxécution de l'appli
+// updateAxiosHeader();
const noPermissions = { "can_view_project": true, "can_create_project": false, "can_update_project": false, "can_view_feature": true, "can_view_archived_feature": true, "can_create_feature": false, "can_update_feature": false, "can_delete_feature": false, "can_publish_feature": false, "can_create_feature_type": false, "can_view_feature_type": true, "is_project_administrator": false }
diff --git a/src/store/modules/feature.js b/src/store/modules/feature.js
index 2b9eb239..e72e524d 100644
--- a/src/store/modules/feature.js
+++ b/src/store/modules/feature.js
@@ -1,11 +1,11 @@
-const axios = require("axios");
+import axios from '@/axios-client.js';
import router from '../../router'
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
const feature = {
diff --git a/src/store/modules/feature_type.js b/src/store/modules/feature_type.js
index bed583d9..cfc3c0dd 100644
--- a/src/store/modules/feature_type.js
+++ b/src/store/modules/feature_type.js
@@ -1,10 +1,10 @@
-import axios from "axios"
+import axios from '@/axios-client.js';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
const getColorsStyles = (customForms) => customForms.filter(customForm => customForm.options && customForm.options.length).map(el => {
//* in dropdown, value is the name and name is the label to be displayed, could be changed...
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index c8e5ce93..b9843087 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -1,11 +1,11 @@
-const axios = require("axios");
+import axios from '@/axios-client.js';
import { mapUtil } from "@/assets/js/map-util.js";
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
const map = {
diff --git a/src/views/feature/Feature_detail.vue b/src/views/feature/Feature_detail.vue
index 24514f13..6bb76f5b 100644
--- a/src/views/feature/Feature_detail.vue
+++ b/src/views/feature/Feature_detail.vue
@@ -351,13 +351,13 @@ import frag from "vue-frag";
import { mapGetters, mapState } from "vuex";
import { mapUtil } from "@/assets/js/map-util.js";
import featureAPI from "@/services/feature-api";
-const axios = require("axios");
+import axios from '@/axios-client.js';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
export default {
name: "Feature_detail",
diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue
index 40e10c25..42cb9d37 100644
--- a/src/views/feature/Feature_edit.vue
+++ b/src/views/feature/Feature_edit.vue
@@ -274,14 +274,14 @@ import featureAPI from "@/services/feature-api";
import L from "leaflet";
import "leaflet-draw";
import { mapUtil } from "@/assets/js/map-util.js";
-const axios = require("axios");
+import axios from '@/axios-client.js';
import flip from "@turf/flip";
-axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return value !== null ? unescape(value[1]) : null;
-})("csrftoken");
+// axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return value !== null ? unescape(value[1]) : null;
+// })("csrftoken");
export default {
name: "Feature_edit",
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 0d6f3942..d3b0e0c3 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -186,13 +186,13 @@ import { mapUtil } from "@/assets/js/map-util.js";
import SidebarLayers from "@/components/map-layers/SidebarLayers";
import FeatureListTable from "@/components/feature/FeatureListTable";
import Dropdown from "@/components/Dropdown.vue";
-const axios = require("axios");
+import axios from '@/axios-client.js';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
export default {
name: "Feature_list",
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index e866ac9c..3a0a526e 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -531,13 +531,13 @@ import { mapUtil } from "@/assets/js/map-util.js";
import { mapGetters, mapState } from "vuex";
import projectAPI from "@/services/project-api";
-const axios = require("axios");
+import axios from '@/axios-client.js';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
export default {
name: "Project_details",
diff --git a/src/views/project/Project_edit.vue b/src/views/project/Project_edit.vue
index a8e08c5b..cb0b09e9 100644
--- a/src/views/project/Project_edit.vue
+++ b/src/views/project/Project_edit.vue
@@ -191,16 +191,16 @@
</template>
<script>
-const axios = require("axios");
+import axios from '@/axios-client.js';
import Dropdown from "@/components/Dropdown.vue";
import { mapGetters } from "vuex";
-axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return value !== null ? unescape(value[1]) : null;
-})("csrftoken");
+// axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return value !== null ? unescape(value[1]) : null;
+// })("csrftoken");
export default {
name: "Project_edit",
diff --git a/src/views/project/Project_members.vue b/src/views/project/Project_members.vue
index 34c89ac5..9745e867 100644
--- a/src/views/project/Project_members.vue
+++ b/src/views/project/Project_members.vue
@@ -106,17 +106,11 @@
</template>
<script>
-import axios from "axios";
+import axios from '@/axios-client.js';
import frag from "vue-frag";
import { mapGetters } from "vuex";
import Dropdown from "@/components/Dropdown.vue";
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
-
export default {
name: "Project_members",
--
GitLab