Error de la internacionalización del front-end: el idioma de la página después de iniciar sesión no es el idioma establecido por el usuario.

Después de agregar la función de cargar idiomas a pedido al sitio web durante un período de tiempo, la prueba descubrió ese error.

Quizás sea porque hay muy pocos idiomas compatibles y muy pocos usuarios extranjeros que este problema se descubrió tan tarde.

Entonces veamos este problema.

El usuario configura el idioma del sitio web en chino, pero el navegador configura el idioma en inglés.

El usuario abre el sitio web y salta a la interfaz de inicio de sesión. Debido a que el usuario no ha iniciado sesión, la interfaz lee que el navegador está en inglés, por lo que el inglés se carga dinámicamente.

Ingrese el nombre de usuario y la contraseña para ir a la página de inicio. Debido a que se utiliza una aplicación de una sola página (SPA) y la página no se actualiza, la copia todavía está en inglés.

El usuario necesita actualizar la página para obtener la versión china de su configuración.

La solución más sencilla es descartar el "salto falso" del SPA que no actualiza la página y sustituirlo por un salto real.

En otras palabras, no utilice la API del enrutador React, ni utilice la biblioteca del enrutador Vue cuya capa inferior es History.pushState(). Utilice window.location.href = homeUrl directamente.

Después de que la solicitud de inicio de sesión sea exitosa, el front-end obtiene el token de usuario. Luego salte a la página de inicio y realice una operación para recargar el idioma, ya que con las credenciales de usuario podemos cargar correctamente el idioma configurado por el usuario.

Aunque los archivos empaquetados SPA suelen ser grandes, tenemos caché, por lo que la recarga es bastante rápida.

Aquí hay un punto de optimización opcional: si el idioma establecido por el usuario es el mismo que el idioma del navegador, aún se puede utilizar el "salto falso". Esto requiere la cooperación del backend para que la pantalla de inicio de sesión pueda devolver adicionalmente el campo de idioma del usuario actual.

Solicitar interfaz de inicio de sesión. Después de obtener el token de usuario, debe obtener el idioma establecido por el usuario.

De acuerdo con este identificador de idioma, obtenga dinámicamente el archivo JS del paquete de idioma correspondiente, descargue el paquete de idioma y sobrescriba el paquete de idioma original, y luego haga un "salto falso" a la página de inicio.

Del mismo modo, si el idioma del usuario es el mismo que el idioma del navegador, puede realizar un "salto falso" directamente a la página de inicio.

No parece muy complicado, pero en realidad hay muchos obstáculos.

Para utilizar este escenario, debe asegurarse de que su código responda a los objetos del paquete de idioma. En otras palabras, tan pronto como cambia el objeto del paquete de idioma, sus componentes y métodos deben cambiar automáticamente.

Esto significa que, en algunos casos, no se puede utilizar el almacenamiento en caché y se debe escribir cierta lógica que implique redacción internacional en forma de funciones. Los componentes no pueden usar contenido estático externo y deben depender de Context o Redux, lo que activará la repetición de renderizado de los componentes.

Por supuesto, otra ventaja de esto es que al cambiar de idioma, no es necesario recargar la página, el componente se volverá a representar y aplicará la copia del nuevo idioma.

Prefiero la opción 1 porque es sencilla y adecuada para cualquier escenario. Además, nunca inicie sesión y luego vuelva a iniciar sesión, ya que habrá muchos cambios de estado y no es fácil de mantener.

Además, cerrar sesión requiere recargar la página, ya que el idioma del usuario y el idioma del navegador pueden ser diferentes.