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

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

Nuxt i18n Calling useRoute within middleware may lead to misleading results

问题

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

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

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

export default defineNuxtRouteMiddleware(async(to, from) => {
    const localPath = useLocalePath()

    const isUserAuthenticated = await isAuthenticated()

    if (isUserAuthenticated) {
        if (to.fullPath === localPath('login') || to.fullPath === localPath('register')) {
            return navigateTo(localPath('/'))
        }
    } else {
        if (to.fullPath !== localPath('login') && to.fullPath !== localPath('register')) {
            return navigateTo(localPath('login'))
        }
    }
})

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

i18n: {
        lazy: true,
        langDir: "locales",
        strategy: "prefix_and_default",
        locales: [
            {
                code: 'nl-Nl',
                iso: 'nl-Nl',
                name: 'Dutch',
                file: 'nl-NL.json'
            },
            {
                code: 'en',
                iso: 'en',
                name: 'English',
                file: 'en.json'
            },
        ],
        detectBrowserLanguage: {
            useCookie: true,
            cookieCrossOrigin: true,
            alwaysRedirect: true,
            cookieKey: 'i18n_redirected',
            redirectOn: 'root'
        },
        defaultLocale: "nl-Nl",
        customRoutes: 'config',
        pages: {
            pricing: {
                en: '/pricing',
                'nl-Nl': '/prijzen',
            }
        }
    }

这是我使用的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:

export default defineNuxtRouteMiddleware(async(to, from) => {
    const localPath = useLocalePath()

    const isUserAuthenticated = await isAuthenticated()

    if (isUserAuthenticated) {
        if (to.fullPath === localPath('login') || to.fullPath === localPath('register')) {
            return navigateTo(localPath('/'))
        }
    } else {
        if (to.fullPath !== localPath('login') && to.fullPath !== localPath('register')) {
            return navigateTo(localPath('login'))
        }
    }

})

I have this in my nuxt.config.ts:

i18n: {
        lazy: true,
        langDir: "locales",
        strategy: "prefix_and_default",
        locales: [
            {
                code: 'nl-Nl',
                iso: 'nl-Nl',
                name: 'Dutch',
                file: 'nl-NL.json'
            },
            {
                code: 'en',
                iso: 'en',
                name: 'English',
                file: 'en.json'
            },
        ],
        detectBrowserLanguage: {
            useCookie: true,
            cookieCrossOrigin: true,
            alwaysRedirect: true,
            cookieKey: 'i18n_redirected',
            redirectOn: 'root'
        },
        defaultLocale: "nl-Nl",
        customRoutes: 'config',
        pages: {
            pricing: {
                en: '/pricing',
                'nl-Nl': '/prijzen',
            }
        }
    }

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

这对我有用

export default defineNuxtRouteMiddleware(async (to, from) => {
    const nuxt = useNuxtApp()

    const isUserAuthenticated = await isAuthenticated()

    if (isUserAuthenticated) {
        if (to.fullPath === nuxt.$localePath('login') || to.fullPath === nuxt.$localePath('register')) {
            return navigateTo(nuxt.$localePath('/'))
        }
    } else {
        if (to.fullPath !== nuxt.$localePath('login') && to.fullPath !== nuxt.$localePath('register')) {
            return navigateTo(nuxt.$localePath('login'))
        }
    }

})
英文:

This works for me

export default defineNuxtRouteMiddleware(async(to, from) => {
    const nuxt = useNuxtApp()

    const isUserAuthenticated = await isAuthenticated()

    if (isUserAuthenticated) {
        if (to.fullPath === nuxt.$localePath('login') || to.fullPath === nuxt.$localePath('register')) {
            return navigateTo(nuxt.$localePath('/'))
        }
    } else {
        if (to.fullPath !== nuxt.$localePath('login') && to.fullPath !== nuxt.$localePath('register')) {
            return navigateTo(nuxt.$localePath('login'))
        }
    }

})

答案2

得分: 0

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

const { locale } = useI18n();

if (!to.fullPath.includes("login")) {
  return navigateTo(`${locale.value}/login`);
}
英文:

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.

const { locale } = useI18n();

if (!to.fullPath.includes("login")) {
  return navigateTo(`${locale.value}/login`);
}

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

发表评论

匿名网友

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

确定