Reevaluate Nuxt.js middleware without a route change

Question

I'm wondering if it's possible to essentially "reevaluate" the middleware conditions without actually changing the current route.

The middleware's purpose is to prevent non-logged-in users from accessing the "dashboard". My issue is, a user could become logged in or logged out without necessarily changing route but they wouldn't be redirected until they try and change pages.

I have a VueX action that triggers when the user's auth state changes but this (from what I can see), can't access the redirect or route variables.

// /mixins/auth.js
const reevaluateAuthStatus = (store, redirect, route) => {
  console.log(route)
  const redirectPolicy = route.meta.map((meta) => {
    if (meta.auth && typeof meta.auth.redirectPolicy !== 'undefined') { return meta.auth.redirectPolicy[0] }
    return []
  })

  const user = store.getters['auth/getUser']
  if (redirectPolicy.includes('LOGGEDOUT')) {
    if (user) {
      return redirect('/dashboard')
    }
  } else if (redirectPolicy.includes('LOGGEDIN')) {
    if (!user) {
      return redirect('/login')
    }
  }
}

module.exports = {
  reevaluateAuthStatus
}

// /middleware/auth.js
import { reevaluateAuthStatus } from '../mixins/auth'

export default function ({ store, redirect, route }) {
  reevaluateAuthStatus(store, redirect, route)
}

Appreciate any help on this :)

Answer 1

You cannot re-evaluate a middleware AFAIK because it's mainly this (as stated in the documentation)

middlewares will be called [...] on the client-side when navigating to further routes

2 clean ways you can still achieve this IMO:

• use some websockets, either with socket.io or something similar like Apollo Subscriptions, to have your UI taking into account the new changes
• export your middleware logic to some kind of call, that you could trigger again by calling the $fetch hook again or any other data-related fetching hook in Nuxt

Some more ugly solutions would probably be:

• making an internal setInterval and check if the actual state is still valid every 5s or so
• move to the same page you are actually on with something like this.$router.go(0) as somehow explained in the Vue router documentation

Still, most of the cases I don't think that this one may be a big issue if the user is logged out, because he will just be redirected once he tries something.
As if the user becomes logged-in, I'm not even sure on which case this one can happen if he is not doing something pro-active on your SPA.

Answer 2

I don't know if it's relevant or not, but I solved a similar problem this way:

• I have a global middleware to check the auth status. It's a function that receives Context as a parameter.
• I have a plugin that injects itself into context (e.g. $middleware). The middleware function is imported here.
• In this plugin I define a method that calls this middleware passing the context (since the Plugin has Context as parameter as well): ctx.$middleware.triggerMiddleware = () => middleware(ctx);
• Now the middleware triggers on every route change as intended, but I can also call this.$middleware.triggerMiddleware() everywhere I want.