Refactor authentication flow

src/router/index.ts

@@ -33,12 +33,11 @@ const routesBase: Readonly<RouteRecordRaw[]> = [
   {
     path: '/',
     name: 'Default',
-    redirect: 'About',
+    component: AboutView,
   },
   {
     path: '/about',
     name: 'About',
-    meta: { authorize: [] },
     component: AboutView,
   },
   {
@@ -49,16 +48,19 @@ const routesBase: Readonly<RouteRecordRaw[]> = [
   },
   {
     path: '/auth/callback',
+    name: 'AuthCallback',
     meta: { layout: 'EmptyLayout' },
     component: Callback,
   },
   {
     path: '/auth/silent',
+    name: 'AuthSilent',
     meta: { layout: 'EmptyLayout' },
     component: Silent,
   },
   {
     path: '/auth/logout',
+    name: 'AuthLogout',
     meta: { layout: 'EmptyLayout' },
     component: Logout,
   },
@@ -82,65 +84,63 @@ export const dynamicRoutes: Readonly<RouteRecordRaw[]> = [
     name: 'SchematicStatusDisplay',
     component: SchematicStatusDisplayView,
     props: true,
-    meta: { authorize: [], sidebar: true },
+    meta: { sidebar: true },
     children: [
       {
-        path: '/ssd/:groupId?/:panelId?/:objectId',
+        path: '/ssd/:groupId?/:panelId?/object/:objectId',
         name: 'SSDTimeSeriesDisplay',
         component: SSDTimeSeriesDisplay,
         props: true,
-        meta: { authorize: [], sidebar: true },
+        meta: { sidebar: true },
       },
     ],
   },
   {
     path: '/systemmonitor',
     name: 'SystemMonitor',
     component: SystemMonitorDisplayView,
-    meta: { authorize: [] },
   },
   {
     path: '/map/:layerName?',
     name: 'SpatialDisplay',
     component: SpatialDisplayView,
     props: true,
-    meta: { authorize: [], sidebar: true },
+    meta: { sidebar: true },
   },
   {
     path: '/series/node/:nodeId?',
     name: 'TimeSeriesDisplay',
     component: TimeSeriesDisplayView,
     props: true,
-    meta: { authorize: [], sidebar: true },
+    meta: { sidebar: true },
   },
   {
     path: '/topology/node/:nodeId?',
     name: 'TopologyDisplay',
     component: TopologyDisplayView,
     props: true,
-    meta: { authorize: [], sidebar: true },
+    meta: { sidebar: true },
     children: [
       {
         path: '/topology/node/:nodeId?/series/',
         name: 'TopologyTimeSeries',
         component: TimeSeriesDisplay,
         props: true,
-        meta: { authorize: [], sidebar: true },
+        meta: { sidebar: true },
       },
       {
         path: '/topology/node/:nodeId?/map/:layerName?',
         name: 'TopologySpatialDisplay',
         component: SpatialDisplay,
         props: true,
-        meta: { authorize: [], sidebar: true },
+        meta: { sidebar: true },
       },
     ],
   },
   {
     path: '/archivedisplay',
     name: 'ArchiveDisplay',
     component: Empty,
-    meta: { authorize: [] },
   },
 ]
 
@@ -151,22 +151,13 @@ const router = createRouter({
 
 let routesAreInitialized = false
 
-async function handleAuthorization(
-  to: RouteLocationNormalized,
-  authorize: string[],
-) {
+async function handleAuthorization(to: RouteLocationNormalized) {
   const currentUser = await authenticationManager.userManager.getUser()
   if (currentUser === null) {
-    return { name: 'Login', query: { redirect: to.path } }
-  }
-
-  const role =
-    currentUser.profile.roles !== undefined
-      ? (currentUser.profile as any).roles[0]
-      : 'guest'
-
-  if (authorize.length && !authorize.includes(role)) {
-    return { name: 'About' }
+    return {
+      name: 'Login',
+      query: { redirect: to.redirectedFrom?.path ?? to.path },
+    }
   }
 }
 
@@ -191,44 +182,50 @@ async function addDynamicRoutes() {
   }
 }
 
-function fillRouteParams(to: RouteLocationNormalized) {
+function defaultRouteParams(to: RouteLocationNormalized) {
   const store = useConfigStore()
-  if (to.name) {
-    const component = store.getComponentByType(to.name as string)
-    if (component !== undefined) {
-      const defaultPath = component.defaultPath
-      to.params = { ...defaultPath, ...to.params }
+  const route = to.name === undefined ? router.resolve(to) : to
+  const component = store.getComponentByType(route.name as string)
+  if (component !== undefined) {
+    const defaultPath = component.defaultPath
+    const params = to.params
+    for (const key in defaultPath) {
+      if (defaultPath[key] !== undefined) {
+        params[key] = params[key] || defaultPath[key]
+      }
     }
+    return params
   }
-  return to
+  return to.params
 }
 
-router.beforeEach(async (to, _from) => {
-  const authorize = to.meta?.authorize as string[]
-  if (authorize && configManager.authenticationIsEnabled) {
-    const authPath = await handleAuthorization(to, authorize)
-    if (authPath) return authPath
-  }
-
-  if (to.path === '/auth/callback') {
+router.beforeEach(async (to, from) => {
+  let redirect: string | undefined = undefined
+  if (to.name === 'Login' || to.name === 'AuthLogout') return
+  if (to.name === 'AuthCallback') {
     try {
       const user =
         await authenticationManager.userManager.signinRedirectCallback()
-      const path: string = user.state === null ? '/' : (user.state as string)
-      return { path }
+      if (user.state) redirect = user.state.toString()
     } catch (error) {
       console.error(error)
     }
   }
 
+  if (configManager.authenticationIsEnabled) {
+    const redirectToLogin = await handleAuthorization(to)
+    if (redirectToLogin) return redirectToLogin
+  }
+
   if (!routesAreInitialized) {
     await addDynamicRoutes()
     routesAreInitialized = true
-    if (to.redirectedFrom) return to.redirectedFrom
+    if (redirect) {
+      return redirect
+    }
     return to
   }
-
-  to = fillRouteParams(to)
+  to.params = defaultRouteParams(to)
   return
 })
 

src/views/auth/Callback.vue

@@ -1,3 +1,3 @@
-<template>Redirecting after logout</template>
+<template>Redirecting after callback</template>
 
 <script setup lang="ts"></script>

src/views/auth/DeltaresLogin.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 const route = useRoute()
 
 function login(): void {
-  const redirect = route.query.redirect || '/about'
+  const redirect = route.query.redirect ?? '/'
   authenticationManager.userManager.signinRedirect({ state: redirect })
 }
 </script>