Make internal redirect inside onBeforeRender

[edikdeisling]

Hello,
I have a common case when I need to show a forbidden page according to the API response, i.e. I need to make an API call inside onBeforeRender and show to the user the forbidden page.

There is an example from the documentation of how I can do it with responding redirect status code to the client. But there are problems with this approach:

1. I don't want to change the URL in the browser
2. I want to respond with the route 403 page immediately

It feels that I need something like this:

// pages/data/index.page.server.ts
export async function onBeforeRender(pageContext: PageContext) {
  const data = await loadData();

  if (data.forbidden) {
    // here I need to call smth to start a new render of a different page that I specify.
    // the forbidden page is completely different and has no common with "data" page
    // I don't want to call throw RenderErrorPage() because my "error" page is specific to that concrete route,
    // but RenderErrorPage will render _error.page.vue which is common for all routes
    return renderPage('/_internal/data-forbidden');
  }
}

For now, I ended up with a slightly modified approach from documentation by executing renderPage inside express callback a second time.

    app.get('*', async (req, res, next) => {
        ....
        let pageContext = await renderPage(pageContextInit);
    
        if (pageContext.redirectTo) {
          pageContext = await renderPage({
            urlOriginal: pageContext.redirectTo,
            data: pageContext.redirectToData
          });
        }
        ....
    });

But it feels wrong to me...

Could somebody give me an advice on how it would be better to do this?

P.S.
I newbie in VPS, but I highly enjoy VPS and really appreciate the maintainer's job in this plugin.
Thank you!

[brillout]

How about making your Page defined in pages/data/index.page.ts render the error page while setting a new prop pageContext.isNotAuthorized that you can use at renderPage() to show the correct status code?

I newbie in VPS, but I highly enjoy VPS and really appreciate the maintainer's job in this plugin.

Thanks for your kind words, I appreciate it.

[brillout]

Maybe RenderErrorPage({ pageContext: someExtra: 'information' }) then? Your _error.page.js can then dispaly that extra info.

[edikdeisling]

If I'm not mistaken - this won't help with the problem of unneeded stuff from _default.page.client.ts and _default.page.server.ts. Because even for _error.page.vue all Vue plugins, global CSS styles for the main application, and others things would be included. For example PWA plugin, which I don't need on this page.

But seems that this solution is better than calling renderPage twice... So also I need to cover _default.page.client.ts and _default.page.server.ts with several if to prevent it including stuff that is unneeded for error pages. Maybe I had to do it from the beginning :)

Thank you so much! This solution will work for me.

[brillout]

You can make your _error.page override your _default.

Thank you so much! This solution will work for me.

👍 Let me know if that solution doesn't end up working for you.

Btw, in case you're in a position to convince your employer: https://github.com/sponsors/brillout.

Also, curious: how did you stumble upon VPS?

[edikdeisling]

@brillout before I installed VPS I'd done all these things on my own. But at some moment I realized that I spend more time creating my own SSR solution and decided to pick VPS. In my case I want to be as flexible as possible that's why pick VPS instead of Nuxt.

In the end, I couldn't reach the perfect solution for my problem. Right now I do this way:

// src/pages/drafts/@draftId
export async function onBeforeRender(pageContext: PageContext) {
  const draft = await loadDraft(pageContext.routeParams!.draftId);

  if (draft.forbidden) {
    throw RenderErrorPage({
      pageContext: {
        is404: false,
        pageProps: {
          type: 'forbidden',
          draft,
        },
      },
    });
  }
}

And show the forbidden page inside _error.page.vue.

The downside is that the error page renders in the context of _default.page.server.ts and _default.page.client.ts. Inside _default.page.server.ts I can insert if to not run logic not needed for a simple forbidden page, but because _default.page.client.ts includes code for the main application all this code is sent to the client. Also, it's not good that each case like that will grow the _default.page.server.ts. Maybe I investigate too much on a second-order page, but can't stop.

From my perspective, it's not a big limitation that I can't render a different page for some async conditions (like a response from the backend) but anyway feels like quite a common case. Would be nice to have more freedom of changing server/client.ts files. Smth like

// variant 1
// index.page.server.ts
export async function onBeforeRender(pageContext: PageContext) {
  return redirect('path-to-folder-with-page.server.ts-and-page.client.ts')
}

// variant 2
export async function onBeforeRender() {
    throw RenderErrorPage({
      page: 'path-to-folder-with-page.server.ts-and-page.client.ts'
    });
}

// variant 3
// some kind of new hooks before onBeforeRender()

[brillout]

You can make your _error.page override your _default.

E.g. _error.page.client.ts to override _default.page.client.ts.

Would be nice to have more freedom

That would be a nice feature indeed.

Thanks for starting sponsoring btw.!