Support csrf tokens in Vue app

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

fiori/app/_router/xs-app.json

@@ -17,8 +17,7 @@
       "source": "^/(.*)$",
       "target": "$1",
       "destination": "srv-api",
-      "authenticationType": "xsuaa",
-      "csrfProtection": false
+      "authenticationType": "xsuaa"
     }
   ]
 }