stash

frontend/src/router.js

@@ -63,6 +63,12 @@ const EXPANDED_ROUTE_BUILDERS = {
     workflow: ({workflow_id}) => `/workflows/${workflow_id}`,
 };
 
+// Only these two builders read identityHandleById/groupHandleById (derived from state.idmap) -
+// ShortId.vue checks this to decide whether a cold-open fetch of idmap is worth waiting on before
+// giving up, so a storage_location/group/workflow/file short id never waits on an unrelated
+// network call.
+export const NEEDS_IDMAP = new Set(['item', 'group_item']);
+
 export function expandedRoute({kind, ...fields}) {
     const buildRoute = EXPANDED_ROUTE_BUILDERS[kind];
     return buildRoute ? buildRoute(fields) : null;
@@ -96,13 +102,24 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
     path: '/i/:handle/:id',
     redirect: to => `/inventory/${to.params.handle}/${to.params.id}`
 }, {
+    // A beforeEnter guard, not `redirect`: `redirect` is called synchronously and its return value
+    // is used as-is (never awaited), and it also *must* resolve to a valid location on every match
+    // (an unresolvable one throws, see vue-router's handleRedirectRecord) - it can't itself wait on
+    // fetchIdMap (see NEEDS_IDMAP) for the item/group_item kinds whose owner handle isn't
+    // resolvable from the token alone. A guard can return `null`/undefined to mean "proceed to the
+    // component instead", which is exactly what's needed here: when expandedRoute can't resolve yet
+    // (or ever - an unrecognized kind), stay on this same URL and mount ShortId.vue in place, which
+    // has full component-lifecycle async support and takes it from there - fetch idmap, retry,
+    // redirect once resolved, or keep showing the decode view.
     path: '/:short_id',
-    redirect: to => {
-        console.log(to)
+    component: ShortId,
+    props: true,
+    beforeEnter: to => {
+        console.log(to);
         const p = deserializeShortId(decodeShortId(to.params.short_id))
         console.log(p)
-        const url = expandedRoute(p)
-        console.log(url)
+        const url = expandedRoute(p);
+        console.log(url);
         return url;
     }
 }, {path: '/inventory/new', component: InventoryNew, meta: {requiresAuth: true}}, {
@@ -197,11 +214,6 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
     path: '/debug/:short_id',
     component: ShortId,
     props: true
-}, {
-    path: '/:short_id',
-    redirect: to => {
-
-    }
 }, {path: '/:pathMatch(.*)*', redirect: '/'}]
 
 const router = createRouter({