Middleware does not work on the client on the first load - v0.10.5

lavsurgut
8
lavsurgut
commented 2 years ago

For example,

export default function (context) {
console.log(context.isClient)
}

All subsequent route changes are executed, but not the first load. This bug invalidates the use of middleware on the client side.

0
Atinux
23.8k
Atinux
commented 2 years ago

This is normal because the first load is on the server side, so the middleware is called from the server-side. We don't run again the middleware on the client, we simply hydrate the DOM.

1
lavsurgut
8
lavsurgut
commented 2 years ago

And why don't you run middleware on the client? You could have some code you want to run on the client. Like modernizr, for example. With modernizr it is not clear where to put it.

1
ausir0726
513
ausir0726
commented 2 years ago

modernizr you can write a plugin . https://nuxtjs.org/examples/plugins/
but , if you want modernizr or else run under ie9 before plugin
( I tried if use ie8 , you will get error before plugin running )

you need put it to nuxt.config.js head.script ( but have escape issue )
maybe you should put it in app.html ( template )
https://github.com/nuxt/nuxt.js/issues/452
that I want run some code under ie9 or else browser .

0
lavsurgut
8
lavsurgut
commented 2 years ago

What I thought of is that Middleware has an access to context and therefore it is convenient to use it and do for example redirect to a certain route. Anyways, for now, I implemented modernizr check on the server side and indeed I use middleware for that. Thanks.

0
rhythnic
0
rhythnic
commented 2 years ago

I second being able to run middleware on the client. My use case is authentication via feathers-vuex which is broken on the server, so I need to exchange a reset-token for an access-token on the client, but I'm unable to run the middleware on the client.

0
MyMediaMagnet
0
MyMediaMagnet
commented 2 years ago

I would also like this feature. It seems like the most logical place for me to place the redirect logic coming from my CMS.

0
christophmayrhofer
13
christophmayrhofer
commented 2 years ago

same issue. I want to use the middleware to fetch data and redirect if I am unauthorized. Right now I have to do it in the components created() method

0
Jones-S
3
Jones-S
commented 2 years ago

Same issue here: #2186

0
SnirShechter
0
SnirShechter
commented a year ago

@christophmayrhofer @Jones-S @MyMediaMagnet @rhythnic @lavsurgut

Seems like we're all in the same issue.

@Atinux is there any way around this?
I tried to use a plugin. but then redirect doesn't work(since, i suppose, router can't find the route because it is not yet available for it.

0
rhythnic
0
rhythnic
commented a year ago

I used $router.redirect inside of a try catch inside of the created callback. $router.redirect throws an error on the server but it succeeds on the client. Then redirect to another route where you actually do what you need to do. It sucks having to create another route and it's fragile in that it depends on the server throwing an error on $router.redirect, but it's the only workaround I could figure out.

0
SnirShechter
0
SnirShechter
commented a year ago

@Atinux @rhythnic @Jones-S @christophmayrhofer @MyMediaMagnet

Looks like the best way is making an init.js plugin (ssr:false) and doing the initialization logic there.

However, redirect() does not work(router.onReady(redirect) will change page but not layout). seems like this is fixed in nuxt-edge.

0
utatti
0
utatti
commented 8 months ago

Also, plugin workaround doesn't work with async middleware.

0
Informations
Question โ€ข Unresolved
#c397 - Created 2 years ago