Nuxt•10mo ago

How to check on a client side that a user was redirected from middleware?

I'm very new to Nuxt and this whole server-side part of it got me a bit confused. I have protected routes in my app and I want to display a popup when a user tries to go to such a route, without having permission to do so. Obviously, the only way a user would be able to try that is by typing in the address bar. So I have a piece of middleware that runs before each route changing and checks whether a user can go there or not. If not, a user is being redirected to an appropriate route. And now, I want to display a popup that says something like "Only authenticated users can reach this page" since - without it - a user might get confused why he'd stay on the same page even though having tried to go to another one. As for now, I have this piece of code:

// middleware/navigate.ts
if (to.path === '/dashboard' && userResponse == null) {
    return navigateTo('/')
  }

// middleware/navigate.ts
if (to.path === '/dashboard' && userResponse == null) {
    return navigateTo('/')
  }

I thought I could first run navigateTo, then show popup, and then return at the end (I can't do it the other way around because then the popup wouldn't really show). But it seems like this whole navigateTo thing doesn't work at all without the return keyword before it (not sure why but ok). So... what I believe I want to do is to run something like middleware but AFTER going back to / and I'm not sure how do I do that. I don't think I can check from wich path a user was redirected (to this / path) on a client side. Same for the get request running from the page. I don't think I can use middleware for it since apparently the navigateTo function needs to run at the end. I don't think I can return a custom message from middleware and read it on a client side. I don't think I can use abortNavigation because it stays in the protected route and throws the 404 error. So... it seems that I can't do various things but is there something what I can do? Or maybe I'm wrong on something I wrote above and there's is a simple solution of my problem and I simply can't see it?

6 Replies

kingtimm•9mo ago

Welcome to Nuxt! The useRoute composable has a “redirectedFrom” param. https://nuxt.com/docs/api/composables/use-route This gives you some options, as you could use this composable on your app.vue, your layout, or your index.vue page. Your popup could be triggered by a v-if=“useRoute().redirectedFrom” (I’m on mobile and can’t test but hope this helps point you in the right direction)

Nuxt

useRoute · Nuxt Composables

The useRoute composable returns the current route.

KepmonOP•9mo ago

I didn't know about the redirectFrom param, so thank you for letting me know. Unfortunately, I'm afraid it wouldn't work that easily. I played around with it a bit and it keeps returning undefined. Then I found this thread: https://github.com/nuxt/nuxt/issues/15146 on Github issues that seems to explain why it wouldn't work.

GitHub

Route property redirectedFrom not getting populated after redirec...

Environment Operating System: Linux Node Version: v16.14.2 Nuxt Version: 3.0.0-rc.11 Nitro Version: - Package Manager: [email protected] Builder: vite User Config: - Runtime Modules: - Build Modules: - Re...

kingtimm•9mo ago

Could you have the middleware insert a query param? Redirect to “/?error=true” (or some other made up name). Then you can use useRoute but look for the query param instead of the redirectFrom

KepmonOP•9mo ago

Hmm... so, I ended up with code like this:

if (to.path === '/dashboard' && userResponse == null) {
    return navigateTo(
      {
        path: '/',
        query: {
          error: 'true'
        }
      },
      { redirectCode: 307 }
    )
  }

if (to.path === '/dashboard' && userResponse == null) {
    return navigateTo(
      {
        path: '/',
        query: {
          error: 'true'
        }
      },
      { redirectCode: 307 }
    )
  }

and... works in Edge and Chrome, doesn't work in Firefox (I always say we should immediately stop supporting this stupid browser but no one would listen to me 🤷‍♀️). Unless I did something wrong (that's why the code). Though, this doesn't change my opinion on Firefox 😅 Also, I checked the Network tab and it seems like Firefox thinks the error code for the /dashboard path is 301, whereas the Nuxt docs specifically say it's 302 (by default) and I specifically set 307, so.... I was thinking about your idea before but I refrained from implementing it because in general I don't like this error=true being in my address bar. And seriously, I thought that I'm just stupid and there was a simple solution to my issue. But, while talking to you, I'm starting to think that maybe this time this is not really the case... So... I guess, I'm going to stick to it and maybe I'll find another one in the future. Thank you for your assistance, it was really helpful 🙏

kingtimm•9mo ago

I’m not the most experienced user and there could be other options. If we need your “/“ route to conditionally show a popup if a user was sent there by middleware, navigateTo can indicate that through query/params. Another option could be to write to a useState(“redirectReason”). You can set a ssr-friendly value in useState, and then in setup function of “/“ route you can check state to trigger your popup notification.

KepmonOP•9mo ago

You're still probably a more experienced user than I am 😉 I implemented this query param as you suggested previously. I had some issues afterwards with making it disappear after the page reload and so on, but ultimately I made it work and I'm almost happy with the solution 😅 So thank you for the idea 🙏 Regarding the useState composable... I didn't know about its existance so thank you again for informing me on that. Though, I was playing around with it for a short while and - in my scenario - it kept returning the default value, even though I'd changed it in middleware. So, I started reading more about it and I found this thread: https://github.com/nuxt/nuxt/issues/22668 that seems to explain why it wouldn't work for my use case. But, overall, it seems like a really handy thing and I already have another possible use case for it, so I'm happy you pointed it out to me 😅

GitHub

Can't modify useState composable in middleware · Issue #22668 · nux...

Environment Node Version: v16.14.0 Nuxt Version: 3.4.2 Reproduction https://stackblitz.com/edit/github-3enzca-pxzayb Click on "Click here to hard reload A". Check logs to check when middl...

Gaming

Programming

How to check on a client side that a user was redirected from middleware?