Building a Strong Friendship Between Nuxt-auth and Nuxt-i18n

Question

Building a Strong Friendship Between Nuxt-auth and Nuxt-i18n

I am facing a challenge while trying to integrate the nuxt@auth module and nuxt-i18n together. The issue arises when I need to have different routes for the login page based on language. For instance:

pages: {
 login: {
  en: '/authentication',
  fr: '/autorisation'
 }
}

The routes are functioning correctly, but I encounter a problem when using nuxt@auth with all pages restricted. The default redirect requests the /login page. In the nuxt.config.js file, I can modify the redirect route, but it only allows me to set one redirect.

auth: {
 redirect: {
  login: '/fr/autorisation'
 }
}

Is there a way to instruct the auth module to request the route based on the selected language? Any help would be greatly appreciated!

javascript authentication vue.js internationalization nuxt.js

Answer 1

Answer №1

I trust this will benefit someone =)

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

Answer 2

I trust this will benefit someone =)

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

Answer 3

Answer №2

There seems to be a workaround for the issue mentioned in this link, but unfortunately I am unable to access the onRedirect method in the current release.

To solve this, I implemented a workaround by creating a plugin called auth-lang-redirect.js. This plugin overrides the redirect option specified in the nuxt.config.js file.

export default ({ app }) => {
  var redirect = app.$auth.$storage.options.redirect
  for (var key in redirect) {
    redirect[key] = '/' + app.i18n.locale + redirect[key]
  }
  app.$auth.$storage.options.redirect = redirect
}

It's important to note that I do not utilize the nuxt-i18n module, but the concept remains the same. To use this plugin, you must register it in the nuxt.config.js file like so:

auth: {
    strategies: { ... },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/user/profile'
    },
    plugins: ['@/plugins/auth-lang-redirect.js']
  },

Answer 4

There seems to be a workaround for the issue mentioned in this link, but unfortunately I am unable to access the onRedirect method in the current release.

To solve this, I implemented a workaround by creating a plugin called auth-lang-redirect.js. This plugin overrides the redirect option specified in the nuxt.config.js file.

export default ({ app }) => {
  var redirect = app.$auth.$storage.options.redirect
  for (var key in redirect) {
    redirect[key] = '/' + app.i18n.locale + redirect[key]
  }
  app.$auth.$storage.options.redirect = redirect
}

It's important to note that I do not utilize the nuxt-i18n module, but the concept remains the same. To use this plugin, you must register it in the nuxt.config.js file like so:

auth: {
    strategies: { ... },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/user/profile'
    },
    plugins: ['@/plugins/auth-lang-redirect.js']
  },

Answer 5

Answer №3

const updateRedirects = ({ app, $auth }) => {
  const originalRedirect = { ...$auth.$storage.options.redirect };

  const modifyRedirects = () => {
    for (const key in originalRedirect) {
      $auth.$storage.options.redirect[key] = app.localePath(originalRedirect[key]);
    }
  };

  modifyRedirects();

  app.i18n.onLanguageChange = () => {
    modifyRedirects();
  };
}

Answer 6

const updateRedirects = ({ app, $auth }) => {
  const originalRedirect = { ...$auth.$storage.options.redirect };

  const modifyRedirects = () => {
    for (const key in originalRedirect) {
      $auth.$storage.options.redirect[key] = app.localePath(originalRedirect[key]);
    }
  };

  modifyRedirects();

  app.i18n.onLanguageChange = () => {
    modifyRedirects();
  };
}

Building a Strong Friendship Between Nuxt-auth and Nuxt-i18n

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble fetching information from a JSON file stored in a local directory while using Angular 7

Sorting tables in Vue.js 2

Learn how to manipulate nested objects and arrays within JSON data by utilizing AJAX and JQuery for seamless access and processing

Mobile issue: unable to scroll to the top of the page

Retrieving data from JavaScript to populate an HTML list in PHP

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

Is it possible to modify a hyperlink title using the named title attribute?

Utilizing an NPM package in your project

How do I locate the scope of a controller that has been loaded in AngularJS?

When null is multiplied by any number in Typescript, the result should be null, not 0

Submission event in jQuery fails to trigger

Interactive Image Viewing Feature Across Multiple Browsers

Glass-pane or angular/HTML overlay on a designated element

Ways to retrieve the replacement string using JavaScript

Improving the performance of Javascript

How to send the file path to an API in JavaScript to convert it

"Utilize Ajax to dynamically generate options in a dropdown menu with multiple

Placing a div tag directly beneath another div tag

What is the process of implementing a service in AngularJS?

"How can I extract father's details by clicking on a button