Nuxt i18n 在中间件中调用 useRoute 可能会导致误导性的结果。

huangapple
go评论215阅读模式
英文:

Nuxt i18n Calling useRoute within middleware may lead to misleading results

问题

在Nuxt 3中，我收到了以下警告：
“在中间件内部调用useRoute可能会导致误导的结果。相反，使用传递给中间件的（to，from）参数来访问新旧路由。”

这是因为我在我的中间件中调用了useLocalePath()。

这是其中一个发生这种情况的中间件：

  1. export default defineNuxtRouteMiddleware(async(to, from) => {
  2.     const localPath = useLocalePath()
  4.     const isUserAuthenticated = await isAuthenticated()
  6.     if (isUserAuthenticated) {
  7.         if (to.fullPath === localPath('login') || to.fullPath === localPath('register')) {
  8.             return navigateTo(localPath('/'))
  9.         }
  10.     } else {
  11.         if (to.fullPath !== localPath('login') && to.fullPath !== localPath('register')) {
  12.             return navigateTo(localPath('login'))
  13.         }
  14.     }
  15. })

我在我的nuxt.config.ts中有这个：

  1. i18n: {
  2.         lazy: true,
  3.         langDir: "locales",
  4.         strategy: "prefix_and_default",
  5.         locales: [
  6.             {
  7.                 code: 'nl-Nl',
  8.                 iso: 'nl-Nl',
  9.                 name: 'Dutch',
  10.                 file: 'nl-NL.json'
  11.             },
  12.             {
  13.                 code: 'en',
  14.                 iso: 'en',
  15.                 name: 'English',
  16.                 file: 'en.json'
  17.             },
  18.         ],
  19.         detectBrowserLanguage: {
  20.             useCookie: true,
  21.             cookieCrossOrigin: true,
  22.             alwaysRedirect: true,
  23.             cookieKey: 'i18n_redirected',
  24.             redirectOn: 'root'
  25.         },
  26.         defaultLocale: "nl-Nl",
  27.         customRoutes: 'config',
  28.         pages: {
  29.             pricing: {
  30.                 en: '/pricing',
  31.                 'nl-Nl': '/prijzen',
  32.             }
  33.         }
  34.     }

这是我使用的i18n版本：
"@nuxtjs/i18n": "^8.0.0-beta.12",

事实上，这段代码完全正常工作，但我不知道为什么会出现这个警告。

是否可以忽略这个警告？

英文:

So I am getting this warning in nuxt3:
Calling useRoute within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.

This happens because I am calling useLocalePath() in my middleware.

This is one of the middleware where it happens:

  1. export default defineNuxtRouteMiddleware(async(to, from) => {
  2.     const localPath = useLocalePath()
  4.     const isUserAuthenticated = await isAuthenticated()
  6.     if (isUserAuthenticated) {
  7.         if (to.fullPath === localPath('login') || to.fullPath === localPath('register')) {
  8.             return navigateTo(localPath('/'))
  9.         }
  10.     } else {
  11.         if (to.fullPath !== localPath('login') && to.fullPath !== localPath('register')) {
  12.             return navigateTo(localPath('login'))
  13.         }
  14.     }
  16. })

I have this in my nuxt.config.ts:

  1. i18n: {
  2.         lazy: true,
  3.         langDir: "locales",
  4.         strategy: "prefix_and_default",
  5.         locales: [
  6.             {
  7.                 code: 'nl-Nl',
  8.                 iso: 'nl-Nl',
  9.                 name: 'Dutch',
  10.                 file: 'nl-NL.json'
  11.             },
  12.             {
  13.                 code: 'en',
  14.                 iso: 'en',
  15.                 name: 'English',
  16.                 file: 'en.json'
  17.             },
  18.         ],
  19.         detectBrowserLanguage: {
  20.             useCookie: true,
  21.             cookieCrossOrigin: true,
  22.             alwaysRedirect: true,
  23.             cookieKey: 'i18n_redirected',
  24.             redirectOn: 'root'
  25.         },
  26.         defaultLocale: "nl-Nl",
  27.         customRoutes: 'config',
  28.         pages: {
  29.             pricing: {
  30.                 en: '/pricing',
  31.                 'nl-Nl': '/prijzen',
  32.             }
  33.         }
  34.     }

This is the version of i18n that i'm using:
"@nuxtjs/i18n": "^8.0.0-beta.12",

The thing is, the code is working perfectly fine, but I don't have any clue why it's giving me this warning.

Is it safe to ignore this warning?

答案1

得分: 3

这对我有用

  1. export default defineNuxtRouteMiddleware(async (to, from) => {
  2.     const nuxt = useNuxtApp()
  4.     const isUserAuthenticated = await isAuthenticated()
  6.     if (isUserAuthenticated) {
  7.         if (to.fullPath === nuxt.$localePath('login') || to.fullPath === nuxt.$localePath('register')) {
  8.             return navigateTo(nuxt.$localePath('/'))
  9.         }
  10.     } else {
  11.         if (to.fullPath !== nuxt.$localePath('login') && to.fullPath !== nuxt.$localePath('register')) {
  12.             return navigateTo(nuxt.$localePath('login'))
  13.         }
  14.     }
  16. })
英文:

This works for me

  1. export default defineNuxtRouteMiddleware(async(to, from) => {
  2.     const nuxt = useNuxtApp()
  4.     const isUserAuthenticated = await isAuthenticated()
  6.     if (isUserAuthenticated) {
  7.         if (to.fullPath === nuxt.$localePath('login') || to.fullPath === nuxt.$localePath('register')) {
  8.             return navigateTo(nuxt.$localePath('/'))
  9.         }
  10.     } else {
  11.         if (to.fullPath !== nuxt.$localePath('login') && to.fullPath !== nuxt.$localePath('register')) {
  12.             return navigateTo(nuxt.$localePath('login'))
  13.         }
  14.     }
  16. })

答案2

得分: 0

useLocalePath() 使用底层的 useRoute() 方法，所以你会收到那个警告。一个解决方法是改用 useI18n() 并访问 App 的 locale 变量。

  1. const { locale } = useI18n();
  3. if (!to.fullPath.includes("login")) {
  4.   return navigateTo(`${locale.value}/login`);
  5. }
英文:

useLocalePath() uses the useRoute() method under the hood that's why you are getting that warn. one solution could be to use useI18n() instead and accesing the App locale variable.

  1. const { locale } = useI18n();
  3. if (!to.fullPath.includes("login")) {
  4.   return navigateTo(`${locale.value}/login`);
  5. }

huangapple
  • 本文由 发表于 2023年8月4日 06:41:19
  • 转载请务必保留本文链接：https://go.coder-hub.com/76831988.html
  • javascript
  • nuxt.js
  • vue-i18n
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定