Nuxt Auth Module - Multiple redirect options after logout

Question

I have a website where the user logs in and then gets access to a dashboard. The user can log in and out from their dashboard as well as from the home page. Now I want that when the user logs out from the dashboard, he gets directed to a different page than when he logs out from the home page. Is this somehow possible with the auth module in Nuxt? I haven't found a way so far.

my nuxt.config.js looks like this at the moment:

auth: {
    redirect: {
      home: "/",
      login: "/"
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: "/api/session", method: "post" },
          logout: { url: "/api/session", method: "destroy" },
          user: { url: "/api/settings", method: "get", propertyName: false }
        },
        tokenType: 'Bearer'
      }
    },
    redirect: {
      login: '/',
      logout: '/',
      home: false,
    },
  }

And then there is the button from the home page:

and the button from the Dashboard:

user_5892421 · Answer

nuxt auth module didn't provide multiple redirect options for different scenarios. but there are two inelegant ways to achieve this:
Method One: change target redirect url with onRedirect
write a plugin plugins/auth.js with content:

export default function({ $auth }) {
 $auth.onRedirect((to, from) => {
   if(from === '/dashboard'){return '/another-logout'}
 })
}

register the plugin in nuxt.config.js:

{
  auth: {
    plugins: [ '~/plugins/auth.js' ],
    strategies: {}
  }
}

Method Two: override watchLoggedIn logic, add logoutWith method

First, disable default watch login:

{
  auth: {
    watchLoggedIn: false, // add this line
    strategies: {}
  }
}

listen loggedIn and extend 'logoutWith' for $auth
create a plugin plugin/auth.js with content:

function routeOption (route, key, value) {
  return route.matched.some((m) => {
    if (process.client) {
      return Object.values(m.components).some(component => component.options && component.options[key] === value)
    } else {
      return Object.values(m.components).some(component => Object.values(component._Ctor).some(ctor => ctor.options && ctor.options[key] === value))
    }
  })
}
export default function ({ $auth }) {
  $auth.$storage.watchState('loggedIn', (loggedIn) => {
    if (!routeOption($auth.ctx.route, 'auth', false)) {
      let redirectKey = loggedIn ? 'home' : 'logout'
      if (redirectKey == 'logout') {
        const logout_type = $auth.$storage.getUniversal('logout_type')
        if (logout_type) {
          redirectKey = 'logout_' + logout_type
          // delete to ensure use only once
          $auth.$storage.removeUniversal('logout_type')
        }
      }
      $auth.redirect(redirectKey)
    }
  })
  $auth.logoutWith = (logout_type, ...args) => {
    $auth.$storage.setUniversal('logout_type', logout_type)
    $auth.logout(...args)
  }
}

dont forget register the plugin in nuxt.config.js

update you redirect options and call logoutWith in any page:

{
  auth: {
    watchLoggedIn: false,
    plugins: [ '~/plugins/auth.js' ],
    redirect: {
      login: '/login',
      logout: '/logout',
      logout_dash: '/another_logout',
      home: '/home'
    },
  }
}

in page dashboard.vue:

By the way, if you want to redirect to another login page based on the route, maybe method one is more suitable

user_6595551 · Answer

I think you can simply use $router.push('/dashboard'):

user_10641250 · Answer

why don't you just set redirect to false

redirect: false,

and manually redirect with router to whatever page you want after logout for different pages

Nuxt Auth Module - Multiple redirect options after logout

3 Answers