feat: Add onRedirect hook to pre-process URLs before redirection

[paulgv]

This is another proposal to address #162
It adds an onRedirect hook that can be defined in a plugin in order to pre-process the URL before the redirect happens.
To use this with nuxt-i18n, you could do something like this:

// ~/plugins/auth.js

export default ({ app }) => {
  $auth.onRedirect(to => {
    return app.localePath(to)
  })
})

[pi0]

Nice enhancement. Can we support more than one listener (array) or maybe wouldn't be better to rename the hook to something like setOnRedirect to make it more clear that calling overrides previous value?

[paulgv]

@pi0 I changed it so it supports multiple listeners like onError :)

[pi0]

Sorry for the late check. Thanks :)

[d0whc3r]

I don't think having multiple events for redirect is a good idea, if the last defined event hasn't a return it could mess it up all

In case of callOnError have more sense because the executed function is not assigned to any variable, but is not the case for callOnRedirect

Or check if the executed function have some vale to set to redirect destination...

What do you think?

[pi0]

@d0whc3r I agree. But we can think of them like middleware functions :)

[liuhuanhui]

hello $auth undefiend

[anheru]

app.$auth.onRedirect is not a function

[paulgv]

This hasn't been released yet, it's pending into another PR with other unreleased commits: #192

@pi0 @manniL any updates?

[ghost]

It's still is not released.
For googlers: I had a problem nuxt-auth and nuxt-i18n combination for custom auth redirects (I could not change language on the login page).
Try to use callback instead of just static string in auth.redirect configuration:

In nuxt.config.js -> auth: { ... } config

// old one - does not work switch language on /auth/login
redirect: {
      login: '/auth/login',
      logout: '/',
      callback: '/auth/login',
      home: '/',
}

// new one. Works fine for me
redirect: {
      login: () => '/auth/login',
      logout: '/',
      callback: () => '/auth/login',
      home: '/',
}

[dseidl]

when will this be released?

[mrleblanc101]

I did not define redirect in thenuxt.config.js, I defined them inside a plugin.
If someone have a better way, please let me know

export default ({ app }) => {
    if (app.i18n.locale === 'fr') {
        app.$auth.options.redirect = {
            login: '/infolettre',
            logout: '/infolettre',
            callback: '/infolettre',
            home: '/infolettre',
        };
    } else {
        app.$auth.options.redirect = {
            login: '/en/newsletter',
            logout: '/en/newsletter',
            callback: '/en/newsletter',
            home: '/en/newsletter',
        };
    }
};

[gaelreyrol]

When this will be released ? 6 months without any major release for a such package, this is not serious...

[pi0]

@paulgv I've added changes to the dev with (aacb191). Will be released with v4.6.0.

-- BTW sorry for not updating this module for a while. I was more than busy.

[stact]

Regarding https://auth.nuxtjs.org/api/auth.html#onredirect-handler
Something go wrong on my side:
Plugin returns:
Cannot read property 'onRedirect' of undefined

[stact]

missed the documentation ^^)
https://auth.nuxtjs.org/api/options.html#plugins

[gnncl]

Regarding https://auth.nuxtjs.org/api/auth.html#onredirect-handler
Something go wrong on my side:
Plugin returns:
Cannot read property 'onRedirect' of undefined

Try this

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

[salim-dev]

nuxt.config.js :

.....
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    'nuxt-i18n'
  ],
auth: {
    plugins: [ '~/plugins/auth.js' ]
}

plugins/auth.js :

export default function({app, $auth }) {
    $auth.options.redirect = {
      login: app.localePath('login'),
      logout: app.localePath('logout'),
      callback: app.localePath('callback'),
      home: app.localePath('home'),
    };
}

[mercibe]

To allow users selecting their locale on the login screen and make their choice follows to the app, I simply added the following plugin (@nuxtjs/auth:4.9.1 and nuxt:2.14.7)

plugins/auth.js :

export default function({app, $auth }) {
  $auth.onRedirect((to, from) => {
    // change `to` by returning a new value
    return app.localePath(to);
  })

}

[jonalxh]

Hi everybody, thanks for your help, I've been able to implement your suggestion, but when redirect is done an error log is shown in console:

Error: Redirected when going from "/profile" to "/es/perfil" via a navigation guard.

I thought it was still using the old redirection, but i changed the redirect endpoint and it is done correctly.

How to avoid the error mesage?