feat: Send authentication token with event requests This commit includes changes to send the authentication token along with event requests. This is necessary to ensure that only authenticated users can send event requests. The token is sent in the header of the request.

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() {