redirect with cookie and Vuex

cloudstrife-bce
3
cloudstrife-bce
commented 3 months ago

Version

6.0

What is expected ?

I expect that when I'm under a language (lets say Spanish) and the cookie is set to 'es', if I change the URL manually to / it redirects me to '/es' which is the last value under the cookie.

What is actually happening?

When I'm under a language (lets say Spanish) and I manually change the URL to / it shows me the website in English and it doesn't changes the cookie which stay with the value of Spanish.

When I add the 'alwaysRedirect: true' under 'detectBrowserLanguage' it works fine that part, bug the content and the cookie are not being changed.

Additional comments?

Hi everyone! Sorry if this is not a bug but I can't get it to work, also I'm a beginner at programming so for sure I must be doing something wrong but can't find the reason.

I'm using the following dependencies:

"nuxt": "^2.8.1",
"nuxt-i18n": "^6.0.0"

I have the following nuxt.config.js file:

[
      'nuxt-i18n', {
        locales: [
          {
            code: 'en',
            iso: 'en-US',
            name: 'English',
            file: 'en.js'
          },
          {
            code: 'es',
            iso: 'es-AR',
            name: 'Spanish',
            file: 'es.js'
          }
        ],
        detectBrowserLanguage: {
          useCookie: true,
          cookieKey: 'i18n_redirected',
          alwaysRedirect: true,
          fallbackLocale: 'en'
        },
        lazy: true,
        langDir: 'locales/',
        vuex: {
          moduleName: 'i18n',
          syncLocale: true,
          syncMessages: true,
          syncRouteParams: true
        }
      }
    ],

Vue component:

<nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
<nuxt-link :to="switchLocalePath('es')">Spanish</nuxt-link>

Here's my CodeSandbox which haves the issues.

Basically I'm trying to achieve the following:

  • At the beginning get the language of the browser and show that one, if none use English by default (Working)
  • Always show /en or /es in the URL (Working)
  • Save locale and messages to Vuex (Working)
  • If the user deletes manually the /en or /es from the URL get the cookie value and set it to that one, not to redirect showing in English if it was in Spanish when I delete it

Another thing which is not working is the data changing in the CodeSandbox example, it only changes the URL but not the data from Testing:.

Thanks for the help.

bug
0
williamweckl
0
williamweckl
commented 2 months ago

I'm with the same issue. Any workarounds?

0
rchl
373
rchl
commented 2 months ago

If the user deletes manually the /en or /es from the URL get the cookie value and set it to that one, not to redirect showing in English if it was in Spanish when I delete it

So you want cookie to be updated on changing the URL manually but respected when opening URL without language prefix?

I feel that would be hard to achieve (I can't think of any way actually) as to make things work that way, it would be necessary to distinguish the case when user manually changes the URL and when user just opens given URL with a link (non SPA link). I don't think it's possible to do that in reliable way.

And if you want both cases to cause the cookie to update then it would probably break some functionality of alwaysRedirect as it wouldn't redirect to saved language if user opened the page from somewhere else (other page for example).

0
williamweckl
0
williamweckl
commented 2 months ago

@rchl The point is: how can we change the user language if everytime it redirects to the old one. You suggest that we need to manually change the cookie value? Is there a method ready to use to change locale instead of using switchLocalePath?

0
rchl
373
rchl
commented 2 months ago
0
williamweckl
0
williamweckl
commented 2 months ago

I've did almost all what's described on this page, except for the vuex part. I'll give it a try and let you know. Thanks.

0
rchl
373
rchl
commented 2 months ago

I meant that you would have a language switcher on the site and use this.$i18n.setLocaleCookie(locale) to persist new locale in cookie.

0
rchl
373
rchl
commented 2 months ago

As of latest version you can just use this.$i18n.setLocale('fr') to switch locale, store cookie (if used) and redirect.

0
Informations
Bug Report โ€ข Open
#c268 - Created 3 months ago