Support csrf tokens in Vue app (#394)

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'])
+    }
+}