Nuxt•2mo ago

Unable to restrict /es/admin path

I am using i18n Nuxt extension. This is my code:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts',
    locales: ['en', 'es'], // used in URL path prefix
    defaultLocale: 'en',
    customRoutes: 'config', // disable custom route with page components
    pages: {
      about: {
        en: '/about-us', // -> accessible at /about-us (no prefix since it's the default locale)
        es: '/sobre', // -> accessible at /es/sobre
      },
      'admin/index': false,
      'admin/*': false, <----- doesn't work
    },
  },
});

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts',
    locales: ['en', 'es'], // used in URL path prefix
    defaultLocale: 'en',
    customRoutes: 'config', // disable custom route with page components
    pages: {
      about: {
        en: '/about-us', // -> accessible at /about-us (no prefix since it's the default locale)
        es: '/sobre', // -> accessible at /es/sobre
      },
      'admin/index': false,
      'admin/*': false, <----- doesn't work
    },
  },
});

I can visit /admin and cannot visit /es/admin . That's great and as expected. But I can visti both /admin/settings and /es/admin/settings. Which is not good. How to use stars or regex or something to block every other subpath for /es locale/prefix?

4 Replies

kapa.ai•2mo ago

Hi @Wirkhof. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with restricting the /es/admin path using the Nuxt i18n module. The configuration you've shown is close, but there's a small adjustment needed to achieve what you're trying to do. According to the Nuxt i18n documentation (https://nuxt.com/docs/getting-started/configuration), the pages configuration in the i18n module is used to define custom routes for specific pages, not to restrict access to certain paths. To restrict access to the /es/admin path, you should use the routeRules configuration in your nuxt.config.ts file instead. Here's how you can modify your configuration:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts',
    locales: ['en', 'es'], // used in URL path prefix
    defaultLocale: 'en',
    customRoutes: 'config', // disable custom route with page components
    pages: {
      about: {
        en: '/about-us',
        es: '/sobre',
      },
    },
  },
  routeRules: {
    '/es/admin/**': { ssr: false }, // This will disable SSR for the Spanish admin routes
    '/admin/**': { ssr: false }, // This will disable SSR for the English admin routes
  }
});

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts',
    locales: ['en', 'es'], // used in URL path prefix
    defaultLocale: 'en',
    customRoutes: 'config', // disable custom route with page components
    pages: {
      about: {
        en: '/about-us',
        es: '/sobre',
      },
    },
  },
  routeRules: {
    '/es/admin/**': { ssr: false }, // This will disable SSR for the Spanish admin routes
    '/admin/**': { ssr: false }, // This will disable SSR for the English admin routes
  }
});

In this configuration, we've moved the admin route rules to the routeRules section. The '**' wildcard will match all paths under /es/admin/ and /admin/, effectively applying the rule to all admin pages in both languages. The { ssr: false } setting will make these routes client-side only, which can be a way to restrict access. However, if you want to completely block access to these routes, you might need to implement additional logic in your middleware or server-side code. Remember that this configuration will affect how these routes are rendered and accessed, but it doesn't provide authentication or authorization by itself. For proper access control, you should implement authentication and authorization logic in your application. Nuxt Configuration Reference (https://nuxt.com/docs/getting-started/configuration) provides more details on how to use routeRules and other configuration options in Nuxt 3. If this doesn't solve your specific issue, you might need to provide more details about what exactly you're trying to achieve with the /es/admin path restriction. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1184447325335199871> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

HardWare•2mo ago

Not gonna lie, if page is localized I prefere to use prefix on all pages, or no prefix at all. It's going to work any way correct cause i18n redirect on default browser locale if enabled. You have literary described here how to do it. https://i18n.nuxtjs.org/docs/v8/guide/custom-paths#module-configuration

@nuxtjs/i18n

Custom Route Paths

Customize the names of the paths for specific locale.

WirkhofOP•4w ago

I don't prefer that and I prefer /admin or /this-is-for-my-chinese-wife to be in one and one language only. In Laravel you can just select routes you want to localize in the web.php file be encapsulating that code e.g.

Route::localized(function () {
    Route::get('about', [AboutController::class, 'index'])->name('about'); // will be /about or /de/about etc
});

Route::get('admin', [AdminController::class, 'index'])->name('admin');  // this will be only /admin no matter what

Route::localized(function () {
    Route::get('about', [AboutController::class, 'index'])->name('about'); // will be /about or /de/about etc
});

Route::get('admin', [AdminController::class, 'index'])->name('admin');  // this will be only /admin no matter what

Why is this concept so hard to grasp for JS people? 😭

Gaming

Programming

Unable to restrict /es/admin path