send client id header with every request initiated from frontend to backend

src/frontend/Communication.ts

@@ -3,6 +3,7 @@
 import { ClientEvent, EncodedGame, GameEvent, ReplayData, ServerEvent } from '../common/Types'
 import Util, { logger } from '../common/Util'
 import Protocol from './../common/Protocol'
+import xhr from './xhr'
 
 const log = logger('Communication.js')
 
@@ -117,7 +118,7 @@ async function requestReplayData(
   offset: number
 ): Promise<ReplayData> {
   const args = { gameId, offset }
-  const res = await fetch(`/api/replay-data${Util.asQueryArgs(args)}`)
+  const res = await xhr.get(`/api/replay-data${Util.asQueryArgs(args)}`, {})
   const json: ReplayData = await res.json()
   return json
 }

src/frontend/components/Upload.vue

@@ -6,6 +6,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import xhr from '../xhr'
 
 export default defineComponent({
   name: 'upload',
@@ -21,8 +22,7 @@ export default defineComponent({
       if (!file) return;
       const formData = new FormData();
       formData.append('file', file, file.name);
-      const res = await fetch('/upload', {
-        method: 'post',
+      const res = await xhr.post('/upload', {
         body: formData,
       })
       const j = await res.json()

src/frontend/main.ts

@@ -7,19 +7,23 @@ import NewGame from './views/NewGame.vue'
 import Game from './views/Game.vue'
 import Replay from './views/Replay.vue'
 import Util from './../common/Util'
+import settings from './settings'
+import xhr from './xhr'
 
 (async () => {
-  const res = await fetch(`/api/conf`)
-  const conf = await res.json()
-
-  function initme() {
-    let ID = localStorage.getItem('ID')
+  function initClientId() {
+    let ID = settings.getStr('ID', '')
     if (!ID) {
       ID = Util.uniqId()
-      localStorage.setItem('ID', ID)
+      settings.setStr('ID', ID)
     }
     return ID
   }
+  const clientId = initClientId()
+  xhr.setClientId(clientId)
+
+  const res = await xhr.get(`/api/conf`, {})
+  const conf = await res.json()
 
   const router = VueRouter.createRouter({
     history: VueRouter.createWebHashHistory(),
@@ -40,7 +44,7 @@ import Util from './../common/Util'
 
   const app = Vue.createApp(App)
   app.config.globalProperties.$config = conf
-  app.config.globalProperties.$clientId = initme()
+  app.config.globalProperties.$clientId = clientId
   app.use(router)
   app.mount('#app')
 })()

src/frontend/views/Index.vue

@@ -13,6 +13,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import xhr from '../xhr'
 
 import GameTeaser from './../components/GameTeaser.vue'
 
@@ -27,7 +28,7 @@ export default defineComponent({
     }
   },
   async created() {
-    const res = await fetch('/api/index-data')
+    const res = await xhr.get('/api/index-data', {})
     const json = await res.json()
     this.gamesRunning = json.gamesRunning
     this.gamesFinished = json.gamesFinished

src/frontend/views/NewGame.vue

@@ -133,7 +133,7 @@ export default defineComponent({
       this.filtersChanged()
     },
     async loadImages () {
-      const res = await fetch(`/api/newgame-data${Util.asQueryArgs(this.filters)}`)
+      const res = await xhr.get(`/api/newgame-data${Util.asQueryArgs(this.filters)}`, {})
       const json = await res.json()
       this.images = json.images
       this.tags = json.tags
@@ -165,8 +165,7 @@ export default defineComponent({
       return await res.json()
     },
     async saveImage (data: any) {
-      const res = await fetch('/api/save-image', {
-        method: 'post',
+      const res = await xhr.post('/api/save-image', {
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json'
@@ -200,8 +199,7 @@ export default defineComponent({
       this.dialog = 'new-game'
     },
     async onNewGame(gameSettings: GameSettings) {
-      const res = await fetch('/api/newgame', {
-        method: 'post',
+      const res = await xhr.post('/api/newgame', {
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json'

src/frontend/xhr.ts

@@ -10,6 +10,7 @@ export interface Options {
   onUploadProgress?: (ev: ProgressEvent<XMLHttpRequestEventTarget>) => any,
 }
 
+let xhrClientId: string = ''
 const request = async (
   method: string,
   url: string,
@@ -22,6 +23,9 @@ const request = async (
     for (const k in options.headers || {}) {
       xhr.setRequestHeader(k, options.headers[k])
     }
+
+    xhr.setRequestHeader('Client-Id', xhrClientId)
+
     xhr.addEventListener('load', function (ev: ProgressEvent<XMLHttpRequestEventTarget>
       ) {
       resolve({
@@ -41,7 +45,7 @@ const request = async (
         }
       })
     }
-    xhr.send(options.body)
+    xhr.send(options.body || null)
   })
 }
 
@@ -53,4 +57,7 @@ export default {
   post: (url: string, options: any): Promise<Response> => {
     return request('post', url, options)
   },
+  setClientId: (clientId: string): void => {
+    xhrClientId = clientId
+  },
 }