315 vue3 authentication and authorization

src/components/map/MapComponent.vue

@@ -9,6 +9,7 @@
     :interactive="true"
     :drag-pan="true"
     :scroll-zoom="true"
+    :transformRequest="transformRequest"
   >
     <slot></slot>
   </mapbox-map>
@@ -18,10 +19,29 @@
 import { onBeforeMount, ref } from 'vue'
 import { MapboxMap } from '@studiometa/vue-mapbox-gl'
 import { configManager } from '../../services/application-config'
+import type { ResourceType } from 'mapbox-gl'
+import { authenticationManager } from '@/services/authentication/AuthenticationManager'
 
 const accessToken = ref('')
 
 onBeforeMount(() => {
   accessToken.value = configManager.get('VITE_MAPBOX_TOKEN')
 })
+
+function transformRequest(url: string, resourceType: ResourceType) {
+  if (!configManager.authenticationIsEnabled)
+    return {
+      url: url,
+    }
+  if (resourceType === 'Image' && url.indexOf('GetMap') > -1) {
+    const requestAuthHeaders = authenticationManager.getAuthorizationHeaders()
+    return {
+      url: url,
+      headers: requestAuthHeaders,
+    }
+  }
+  return {
+    url: url,
+  }
+}
 </script>

src/components/systemmonitor/ImportStatusComponent.vue

@@ -25,9 +25,9 @@
 <script setup lang="ts">
 import { ImportStatus, PiWebserviceProvider } from '@deltares/fews-pi-requests'
 import { onMounted, onUnmounted, ref } from 'vue'
-import { authenticationManager } from '../../services/authentication/AuthenticationManager.ts'
 import { configManager } from '../../services/application-config'
 import { VDataTable } from 'vuetify/labs/VDataTable'
+import { transformRequestFn } from '@/lib/requests/transformRequest'
 type UnwrapReadonlyArrayType<A> = A extends Readonly<Array<infer I>>
   ? UnwrapReadonlyArrayType<I>
   : A
@@ -48,10 +48,8 @@ let importStatus = ref<ImportStatus[]>([])
 let active: boolean = false
 
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
-const transformRequestFn = (request: Request) =>
-  Promise.resolve(authenticationManager.transformRequestAuth(request))
 const webServiceProvider = new PiWebserviceProvider(baseUrl, {
-  transformRequestFn,
+  transformRequestFn: transformRequestFn(),
 })
 
 onUnmounted(() => {

src/components/systemmonitor/RunningTasks.vue

@@ -24,10 +24,10 @@ import {
   TaskRunsFilter,
   TaskRunsResponse,
 } from '@deltares/fews-pi-requests'
-import { authenticationManager } from '../../services/authentication/AuthenticationManager.ts'
 import { configManager } from '../../services/application-config'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { VDataTable } from 'vuetify/labs/VDataTable'
+import { transformRequestFn } from '@/lib/requests/transformRequest'
 type UnwrapReadonlyArrayType<A> = A extends Readonly<Array<infer I>>
   ? UnwrapReadonlyArrayType<I>
   : A
@@ -38,10 +38,8 @@ const props = defineProps(['timeOut'])
 
 let noDataText = ref('Loading data..')
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
-const transformRequestFn = (request: Request) =>
-  Promise.resolve(authenticationManager.transformRequestAuth(request))
 const webServiceProvider = new PiWebserviceProvider(baseUrl, {
-  transformRequestFn,
+  transformRequestFn: transformRequestFn(),
 })
 
 onUnmounted(() => {
@@ -65,7 +63,6 @@ onMounted(() => {
 })
 
 function getColor(status: any): string {
-  console.log(status)
   switch (status) {
     case 'pending':
       return 'light-gray'

src/lib/fews-config/index.ts

@@ -1,14 +1,12 @@
 import { configManager } from '../../services/application-config/index.ts'
-import { authenticationManager } from '../../services/authentication/AuthenticationManager.ts'
 import type { WebOcComponent, WebOcConfiguration } from './types.ts'
 import { PiWebserviceProvider } from '@deltares/fews-pi-requests'
+import { transformRequestFn } from '@/lib/requests/transformRequest'
 
 export async function getFewsConfig(): Promise<WebOcConfiguration> {
   const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
-  const transformRequestFn = (request: Request) =>
-    Promise.resolve(authenticationManager.transformRequestAuth(request))
   const webServiceProvider = new PiWebserviceProvider(baseUrl, {
-    transformRequestFn,
+    transformRequestFn: transformRequestFn(),
   })
   const fewsConfig = await webServiceProvider.getWebOcConfiguration()
   const webOcComponents: WebOcComponent[] = []

src/lib/requests/transformRequest.ts

@@ -0,0 +1,9 @@
+import { authenticationManager } from '@/services/authentication/AuthenticationManager.ts'
+
+export function transformRequestFn(controller?: AbortController) {
+  return async (request: Request): Promise<Request> => {
+    return Promise.resolve(
+      authenticationManager.transformRequestAuth(request, controller?.signal),
+    )
+  }
+}

src/services/useTimeSeries/index.ts

@@ -5,6 +5,7 @@ import { absoluteUrl } from '../../lib/utils/absoluteUrl'
 import { DateTime, Interval } from 'luxon'
 import { Series } from '../../lib/timeseries/timeSeries'
 import { SeriesUrlRequest } from '../../lib/timeseries/timeSeriesResource'
+import { transformRequestFn } from '@/lib/requests/transformRequest'
 
 export interface UseTimeSeriesReturn {
   error: Ref<any>
@@ -47,13 +48,18 @@ export function useTimeSeries(
   requests: MaybeRefOrGetter<ActionRequest[]>,
   options?: UseTimeSeriesOptions,
 ): UseTimeSeriesReturn {
-  const piProvider = new PiWebserviceProvider(baseUrl)
+  let controller = new AbortController()
   const isReady = ref(false)
   const isLoading = ref(false)
   const series = ref<Record<string, Series>>({})
   const error = shallowRef<unknown | undefined>(undefined)
 
   watchEffect(async () => {
+    controller.abort()
+    controller = new AbortController()
+    const piProvider = new PiWebserviceProvider(baseUrl, {
+      transformRequestFn: transformRequestFn(controller),
+    })
     const _requests = toValue(requests)
     for (const r in _requests) {
       const request = _requests[r]

src/services/useTopologyNodes/index.ts

@@ -8,6 +8,7 @@ import type { MaybeRefOrGetter, Ref } from 'vue'
 import { DisplayConfig } from '../../lib/display/DisplayConfig.js'
 import { timeSeriesDisplayToChartConfig } from '../../lib/charts/timeSeriesDisplayToChartConfig'
 import { ChartConfig } from '../../lib/charts/types/ChartConfig.js'
+import { transformRequestFn } from '@/lib/requests/transformRequest.js'
 
 export interface UseTopologyNodesReturn {
   error: Ref<any>
@@ -37,7 +38,9 @@ export function useTopologyNodes(
   nodeId: MaybeRefOrGetter<string>,
   plotId: MaybeRefOrGetter<number>,
 ): UseTopologyNodesReturn {
-  const piProvider = new PiWebserviceProvider(baseUrl)
+  const piProvider = new PiWebserviceProvider(baseUrl, {
+    transformRequestFn: transformRequestFn(),
+  })
 
   const isReady = ref(false)
   const isLoading = ref(false)

src/services/useWms/index.ts

@@ -11,6 +11,7 @@ import { toWgs84 } from '@turf/projection'
 import { point } from '@turf/helpers'
 import { LngLatBounds } from 'mapbox-gl'
 import { GetLegendGraphicResponse } from '@deltares/fews-wms-requests/src/response/getLegendGraphicResponse.ts'
+import { transformRequestFn } from '@/lib/requests/transformRequest'
 
 export interface UseWmsReturn {
   legendGraphic: Ref<GetLegendGraphicResponse | undefined>
@@ -23,7 +24,9 @@ export function useWmsLayer(
 ): UseWmsReturn {
   const legendGraphic = ref<GetLegendGraphicResponse>()
   const wmsUrl = `${baseUrl}/wms`
-  const wmsProvider = new WMSProvider(wmsUrl)
+  const wmsProvider = new WMSProvider(wmsUrl, {
+    transformRequestFn: transformRequestFn(),
+  })
   const times = ref<Date[]>()
 
   async function loadTimes(): Promise<void> {
@@ -95,7 +98,9 @@ export function useWmsCapilities(
 ): Ref<GetCapabilitiesResponse | undefined> {
   const capabilities = ref<GetCapabilitiesResponse>()
   const wmsUrl = `${baseUrl}/wms`
-  const wmsProvider = new WMSProvider(wmsUrl)
+  const wmsProvider = new WMSProvider(wmsUrl, {
+    transformRequestFn: transformRequestFn(),
+  })
 
   async function loadCapabilities(): Promise<void> {
     try {