From aa5fda976abadbcb77ed1537a6219993a891948d Mon Sep 17 00:00:00 2001
From: Christian Georgi <chgeo@users.noreply.github.com>
Date: Fri, 16 Sep 2022 15:46:20 +0200
Subject: [PATCH] Support csrf tokens in Vue app (#394)

---
 bookshop/app/vue/app.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/bookshop/app/vue/app.js b/bookshop/app/vue/app.js
index 18e4ef23..b637d115 100644
--- a/bookshop/app/vue/app.js
+++ b/bookshop/app/vue/app.js
@@ -56,7 +56,7 @@ const books = Vue.createApp ({
             } catch (err) { books.user = { id: err.message } }
         },
     }
-}).mount("#app")
+}).mount('#app')
 
 books.getUserInfo()
 books.fetch() // initially fill list of books
@@ -65,3 +65,25 @@ document.addEventListener('keydown', (event) => {
     // hide user info on request
     if (event.key === 'u')  books.user = undefined
 })
+
+axios.interceptors.request.use(csrfToken)
+function csrfToken (request) {
+    if (request.method === 'head' || request.method === 'get') return request
+    if ('csrfToken' in document) {
+        request.headers['x-csrf-token'] = document.csrfToken
+        return request
+    }
+    return fetchToken().then(token => {
+        document.csrfToken = token
+        request.headers['x-csrf-token'] = document.csrfToken
+        return request
+    }).catch(_ => {
+        document.csrfToken = null // set mark to not try again
+        return request
+    })
+
+    function fetchToken() {
+        return axios.get('/', { headers: { 'x-csrf-token': 'fetch' } })
+        .then(res => res.headers['x-csrf-token'])
+    }
+}
\ No newline at end of file