Implementing Elegant 403 Pages in Admin Frameworks by Replacing Route Components

Introduction

403 pages usually indicate that the user lacks permission, which is different from the meaning of 404 pages. Most admin backend frameworks only provide support for 404 pages and ignore 403 handling, or their 403 handling is unsatisfactory.

How Other Frameworks Handle 403

1. No handling

When a framework does not handle 403, the unauthorized request is often routed to the 404 page because the route is removed before registration, making it indistinguishable for the user.

2. Minimal handling

Some frameworks keep the route registered but use a navigation guard to redirect to a pre‑registered 403 page when the user lacks permission. This distinguishes 403 from 404, but the URL is replaced by the 403 page, causing a slight user‑experience drawback.

My Approach

First, the route must remain registered so that 403 can be distinguished from 404. Second, we should not redirect; the URL should stay unchanged while displaying the 403 content. The solution is to replace the component of unauthorized routes with a 403 component during route registration.

Code illustration:

// Original route data
[
  {
    path: '/permission',
    component: () => import('@/layouts/index.vue'),
    children: [
      {
        path: 'index',
        component: () => import('@/views/list1.vue'),
        meta: {
          auth: 'admin' // only admin can access
        }
      }
    ]
  }
]

// After processing for a user with "test" permission
[
  {
    path: '/permission',
    component: () => import('@/layouts/index.vue'),
    children: [
      {
        path: 'index',
        component: () => import('@/views/403.vue'), // replaced with 403 component
        meta: {
          auth: 'admin'
        }
      }
    ]
  }
]

The result shows that when the account switches from admin to test , the page displays the 403 component while the URL remains the original one.

Is This Enough?

No, because the 404 page is usually handled with a catch‑all route:

{
  path: '/:all(.*)*',
  component: () => import('@/views/404.vue')
}

This catch‑all route renders a full‑screen page, while the 403 page rendered as a child route appears only partially. To make 403 full‑screen, we convert multi‑level routes into a single level before registration, merging their path values.

Example code:

// Original route data
[
  {
    path: '/permission',
    component: () => import('@/layouts/index.vue'),
    children: [
      {
        path: 'index',
        component: () => import('@/views/list1.vue'),
        meta: {
          auth: 'admin'
        }
      }
    ]
  }
]

// After processing for a "test" user
[
  {
    path: '/permission/index', // merged path
    component: () => import('@/layouts/403.vue'),
    meta: {
      auth: 'admin'
    }
  }
]

The final effect is a full‑screen 403 page with the original URL preserved.

Conclusion

Although 403 handling is not a high‑priority feature for most frameworks, both of the discussed approaches can prevent unauthorized access. My solution optimizes user experience by keeping the original URL and providing a full‑screen 403 page without extra redirects.

It may not be the most elegant solution in every scenario, but it offers a practical balance between functionality and usability.

Other Observations

The framework shown in the second example does not refresh the page when switching accounts, resulting in a smooth experience because the routes do not need to be rebuilt on permission changes.

Further refinements are possible, and suggestions are welcome in the comments.

Final Note

If you are interested in the Fantastic‑admin framework mentioned in the article, you can explore it for an out‑of‑the‑box development experience. The described solution is already integrated into the framework, and the source code is available for deeper inspection.

Check out my previous articles on admin frameworks for more insights:

How to Build a Management Backend Framework

Designing Decorative Animations in Backend Frameworks

Solving Multi‑Level Route Caching with Keep‑Alive

Thinking Differently in a Homogeneous Backend Landscape

Vue Admin Framework That Auto‑Configures Routes