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

[lavsurgut]

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.

_{This question is available on Nuxt.js community (#c397)}

[Atinux]

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.

[lavsurgut]

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.

[ausir0726]

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 )
#452
that I want run some code under ie9 or else browser .

[lavsurgut]

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.

[rhythnic]

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.

[MyMediaMagnet]

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

[christophmayrhofer]

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

[Jones-S]

Same issue here: #2186

[SnirShechter]

@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.

[rhythnic]

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.

[SnirShechter]

@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.

[hatashiro]

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

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.