Redirect to "not-found" but Preserve Path

[loic-bellinger]

I’m using Vue Router and have defined my routes as follows:

{
  path: '/admin',
  children: [
    {
      path: '',
      name: 'admin-home',
      component: () => import('@/views/admin/AdminHomeView.vue'),
      meta: {
        requiresAuth: true,
      },
    },
    {
      path: 'sites-management',
      name: 'sites-management',
      component: () => import('@/views/admin/AdminSitesManagementView.vue'),
      meta: {
        requiresAuth: true,
      },
    },
  ],
},
{
  path: "/forbidden",
  name: "forbidden-access",
  component: () => import("@/views/ForbiddenAccessView.vue"),
},
{
  path: '/:pathMatch(.*)*'
  name: 'not-found',
  component: () => import('@/views/NotFoundView.vue'),
},

I also have a beforeEach navigation guard to check authentication and role-based access:

router.beforeEach(async (to) => {
  if (to.meta.requiresAuth) {
    if (!router.keycloak.authenticated) {
      return { name: 'not-found' }; // Pretend route doesn't exist for unauthenticated users
    }
    if (!router.keycloak.hasRealmRole(import.meta.env.VITE_KEYCLOAK_ROLE_SUPERADMIN)) {
      return { name: 'forbidden-access' }; // Show forbidden access for users lacking the superadmin role
    }
  }
});

How can I do so that if the user is unauthenticated, they should remain at /admin but see the NotFoundView.vue component ? Currently, it is redirected to / and the NotFoundView.vue component is properly displayed.

Would appreciate any insights! Thanks!

[loic-bellinger]

I updated the routes to handle both "not-found" and "forbidden-access" pages in the following way:

{
  path: '/:pathMatch(.*)*', // Matches any route not defined
  name: 'not-found',
  component: () => import('@/views/NotFoundView.vue'),
},
{
  path: '/:pathMatch(.*)*',
  name: "forbidden-access",
  component: () => import("@/views/ForbiddenAccessView.vue"),
}

This change ensures that the Forbidden Access page cannot be accessed directly by typing the URL. It will only be shown through the route guard when needed.

Then, in the navigation guard, I check the authentication and role-based authorization and preserve the original URL by passing params: { pathMatch: to.path.substring(1).split('/') }. This way, the user’s intended path is kept, and the correct component is displayed, either "NotFoundView" or "ForbiddenAccessView":

router.beforeEach(async (to) => {
  if (to.meta.requiresAuth && !to.redirectedFrom) {
    if (!router.keycloak.authenticated) {
      return { name: 'not-found', params: { pathMatch: to.path.substring(1).split('/') } }; // Pretend route doesn't exist for unauthenticated users
    }

    if (!router.keycloak.hasRealmRole(import.meta.env.VITE_KEYCLOAK_ROLE_SUPERADMIN)) {
      return { name: 'forbidden-access', params: { pathMatch: to.path.substring(1).split('/') } }; // Show forbidden access for users lacking the superadmin role
    }
  }
});

Could you confirm that this approach is sound and not overly complex or risky? I believe it's working as intended, but I’d appreciate any feedback or suggestions! Thanks in advance!

[posva]

Yes, this is correct!