Authentication - server side middleware
Hi, I am quite new to nuxt3 and vue.
I found this particular problem and could not find any solution or explanation. Maybe I'm the one who misunderstood the nuxt as a whole.
Anyway, my problem/question:
I have created an authentication and authorisation using JWT and http only cookie. With a spring backend in java.
I have a server side middleware that checks if user has http only cookie with token and then axios req on my api endpoint like /api/v1/access.
This checks if the user has access and role to visit this page or not.
However, I found that if I have this as a global server-side middleware under /server/middleware/ it is only triggered when doing a full page reload or moving around using window.location.href regardless of having SSR enabled or not.
The server middleware is not triggered when using router.push or navigation. I understand that router.push is client side and has nothing to do with server communication as it pushes new entry to a history stack.
If I recreated this as a hybrid client-side and server-side middleware, I guess it won't work?
The problem is that anyone with a little understanding of JS could change this or edit the fetch script so that they would get access to the protected page. I understand that they will not get the rights to modify content or view more than the dashboard "skeleton" as everything else needs to be accessed through secure APIs with JWT on the server side. But still, what can I do to prevent anyone without permission from accessing the dashboard as it may still contain some not so private information. I just dont want anyone to be able to access and see what the admin panel (dashboard) looks like.
Is something like this possible?
Client GET /path => Nuxt server-side middleware POST => Spring backend
Spring backend POST response => Nuxt shows page or deny page => client GET response
Have I got the nuxt lifecycle wrong or am I missing something?
I would appreciate any answers.
Thank you very much.
I found this particular problem and could not find any solution or explanation. Maybe I'm the one who misunderstood the nuxt as a whole.
Anyway, my problem/question:
I have created an authentication and authorisation using JWT and http only cookie. With a spring backend in java.
I have a server side middleware that checks if user has http only cookie with token and then axios req on my api endpoint like /api/v1/access.
This checks if the user has access and role to visit this page or not.
However, I found that if I have this as a global server-side middleware under /server/middleware/ it is only triggered when doing a full page reload or moving around using window.location.href regardless of having SSR enabled or not.
The server middleware is not triggered when using router.push or navigation. I understand that router.push is client side and has nothing to do with server communication as it pushes new entry to a history stack.
If I recreated this as a hybrid client-side and server-side middleware, I guess it won't work?
The problem is that anyone with a little understanding of JS could change this or edit the fetch script so that they would get access to the protected page. I understand that they will not get the rights to modify content or view more than the dashboard "skeleton" as everything else needs to be accessed through secure APIs with JWT on the server side. But still, what can I do to prevent anyone without permission from accessing the dashboard as it may still contain some not so private information. I just dont want anyone to be able to access and see what the admin panel (dashboard) looks like.
Is something like this possible?
Client GET /path => Nuxt server-side middleware POST => Spring backend
Spring backend POST response => Nuxt shows page or deny page => client GET response
Have I got the nuxt lifecycle wrong or am I missing something?
I would appreciate any answers.
Thank you very much.
