Merge pull request #120 from buggregator/hotfix/http-event-tken

feat: Send authentication token with event requests

Author: butschster

pages/http-dumps/[id].vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useRoute, useRouter, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useHttpDump } from "~/src/entities/http-dump";
 import type { HttpDump } from "~/src/entities/http-dump/types";
@@ -40,11 +40,13 @@ export default defineComponent({
   async setup() {
     const route = useRoute();
     const router = useRouter();
+    const nuxtApp = useNuxtApp();
     const eventId = route.params.id as EventId;
 
     const { events } = useEvents();
 
     const { data: event, pending } = await useFetch(events.getUrl(eventId), {
+      headers: {"X-Auth-Token": nuxtApp.$authToken.token},
       onResponse({ response }) {
         return response.data;
       },

pages/inspector/[id].vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useInspector } from "~/src/entities/inspector";
 import type { Inspector } from "~/src/entities/inspector/types";
@@ -40,11 +40,13 @@ export default defineComponent({
   async setup() {
     const route = useRoute();
     const router = useRouter();
+    const nuxtApp = useNuxtApp();
     const eventId = route.params.id as EventId;
 
     const { events } = useEvents();
 
     const { data: event, pending } = await useFetch(events.getUrl(eventId), {
+      headers: {"X-Auth-Token": nuxtApp.$authToken.token},
       onResponse({ response }) {
         return response.data;
       },

pages/profiler/[id].vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useProfiler } from "~/src/entities/profiler";
 import type { Profiler } from "~/src/entities/profiler/types";
@@ -39,11 +39,13 @@ export default defineComponent({
   async setup() {
     const route = useRoute();
     const router = useRouter();
+    const nuxtApp = useNuxtApp();
     const eventId = route.params.id as EventId;
 
     const { events } = useEvents();
 
     const { data: event, pending } = await useFetch(events.getUrl(eventId), {
+      headers: {"X-Auth-Token": nuxtApp.$authToken.token},
       onResponse({ response }) {
         return response.data;
       },

pages/sentry/[id].vue

@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useRoute, useRouter, useFetch } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useRoute, useRouter, useFetch, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useSentry } from "~/src/entities/sentry";
 import type { Sentry } from "~/src/entities/sentry/types";
@@ -40,11 +40,13 @@ export default defineComponent({
   async setup() {
     const route = useRoute();
     const router = useRouter();
+    const nuxtApp = useNuxtApp();
     const eventId = route.params.id as EventId;
 
     const { events } = useEvents();
 
     const { data: event, pending } = await useFetch(events.getUrl(eventId), {
+      headers: {"X-Auth-Token": nuxtApp.$authToken.token},
       onResponse({ response }) {
         return response.data;
       },

pages/smtp/[id].vue

@@ -17,14 +17,14 @@
     </div>
 
     <div class="smtp-event__body">
-      <SmtpPage v-if="event" :event="event" :html-source="html" />
+      <SmtpPage v-if="event" :event="event" :html-source="html"/>
     </div>
   </main>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useSmtp } from "~/src/entities/smtp";
 import type { SMTP } from "~/src/entities/smtp/types";
@@ -33,19 +33,22 @@ import { useEvents } from "~/src/shared/lib/use-events";
 import type { EventId, ServerEvent } from "~/src/shared/types";
 import { SmtpPage } from "~/src/screens/smtp";
 
-const { normalizeSmtpEvent } = useSmtp();
+const {normalizeSmtpEvent} = useSmtp();
 
 export default defineComponent({
-  components: { SmtpPage, PageHeader },
+  components: {SmtpPage, PageHeader},
   async setup() {
     const route = useRoute();
     const router = useRouter();
+    const nuxtApp = useNuxtApp();
     const eventId = route.params.id as EventId;
 
-    const { events } = useEvents();
+    const {events} = useEvents();
 
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      onResponse({ response }) {
+    // TODO: move to main API module
+    const {data: event, pending} = await useFetch(events.getUrl(eventId), {
+      headers: {"X-Auth-Token": nuxtApp.$authToken.token},
+      onResponse({response}) {
         return response.data;
       },
       onResponseError() {