CODEWITHSUNDEEP
vue.jshttp-redirectnuxt.jsvuexmiddleware
Michael Price
Michael Price

Reputation: 31

Reevaluate Nuxt.js middleware without a route change

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 :)

Upvotes: 3

Views: 2041

Answers (2)

Eugene Soloviov
Eugene Soloviov

Reputation: 11

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.

Upvotes: 0

kissu
kissu

Reputation: 46604

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:

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.

Upvotes: 1

Related Questions