Middleware doesn't work (well) when using async/await?!
Hi, I have a very simple middle where which is doing an awaited call to verify a JWT. However, this async call break the middleware and causes the app to behave weirdly. Adding the code in the screenshot causes the protected page to load for a split second and then still causes a redirect, I am not sure why and I am unable to debug this as I have already confirmed that the middleware is only executed once, at least based on logs. See video for the weird behaviour.
11 Replies
as per my understanding, a middleware is run before the app is 'created'. There are lifecycle methods and 'created' is one of them. you need to have that token saved in the cookies/localstorage and then use that to authenticate if the user is loged in or not. Do not use asynchronous function directly.
It's a really simple implementation. There is a api route that creates the cookie, one protected page, one public page and the middle ware, that's it. Here screenshots of the code, just don't understand why it is only breaking (showing this strange redirect behaviour) if I am doing an awaited call in the middleware. If I am only doing sync function calls, it's working fine.
just to clarify middleware has nothing to do with component lifecycle hooks. Instead they are guards called before opening a page. async operations can be done
That was also my understanding, thanks @Likonima - thought I'd start a new thread to be more clear about the issue being the middleware.
Ok, I narrowed things down a bit more. I had a few helper functions to manage the JWT in
/utils/jwt.ts - somehow that seems to be the issue. Even when using the same code as the auth.ts middleware (see screenshot in my previous message) in the protected.vue page directly, I am still getting the same redirect behaviour. So I decided to try using jose directly in the page and it works fine. Anyone got an idea why using helper like this (screenshot below) could cause these issues? Next I will quickly create composables for this and see how that behaves.
I created a composable for both createJwt and verifyJwt and experiencing the same issue using the middleware again. This is really annoying and I just don't know what the issue is..
Hi @Nik ⚡
that's the way my auth works - absolutely no idea if it's the "smooth" or correct ways of doing so as I'm only a script kiddie 🙈
Thanks for sharing @JonathanDoerfler .
Something else I discovered playing around with it that I can't explain and may be related to the issues I have been having with the middleware approach. Even when runing the code on the page script itself, I am still getting the split second redirect issue when adding the navigateTo('/') to the catch block. Checking the logs, the block is never executed, but still when adding this one line of code to it, I am getting the same strange behaviour. Anyone got a clue? See screenshot showing the script part of the protected page. It works as expected like this with the navigateTo commented out in the catch block, but when in there (even though no error is thrown) I am getting the split second redirect (as per video shared above)... So strange, would really be good if someone has a logical explanation for this. I am trying really hard to try and use Nuxt over Next right now, but Nuxt is not making it easy for me right now... 😦
Further to my post above, I added some console outputs and when a session is set (cookie) I am getting the strange redirect behaviour (see video) and NO console output is shown.
thanks for clearing..