feat(nuxt3): add middleware via route meta (nuxt#2858)

groteck · Jan 25, 2022 · dccc0c9 · dccc0c9
1 parent 2d1b772
commit dccc0c9
Show file tree

Hide file tree

Showing 32 changed files with 399 additions and 20 deletions.
diff --git a/.markdownlintignore b/.markdownlintignore
@@ -1,4 +1,4 @@
 **/node_modules
 
 docs/content/index.md
-docs/content/**/15.nuxt.config.md
+docs/content/**/*.nuxt.config.md
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -1,2 +1,2 @@
 schema
-15.nuxt.config.md
+*.nuxt.config.md
diff --git a/docs/content/1.getting-started/6.migration.md b/docs/content/1.getting-started/6.migration.md
@@ -32,6 +32,7 @@ Vue Version               | 2       | 3        | Yes
 Assets                    | ✅      | ✅        | No
 Components                | ✅      | ✅        | No
 Layouts                   | ✅      | ✅        | Yes
+Middleware                | ✅      | ✅        | Yes
 Error Pages               | ✅      | 🚧        | Yes
 Pages                     | ✅      | ✅        | Yes
 Pages: Dynamic Params     | ✅      | ✅        | Yes

diff --git a/...t/3.docs/2.directory-structure/9.pages.md → .../3.docs/2.directory-structure/10.pages.md b/...t/3.docs/2.directory-structure/9.pages.md → .../3.docs/2.directory-structure/10.pages.md
@@ -206,6 +206,10 @@ Of course, you are welcome to define metadata for your own use throughout your a
 
 You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/directory-structure/layouts).
 
+#### `middleware`
+
+You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/directory-structure/middleware).
+
 #### `layoutTransition` and `pageTransition`
 
 You can define transition properties for the `<transition>` components that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. [More about transitions](https://v3.vuejs.org/guide/transitions-overview.html).
diff --git a/....docs/2.directory-structure/10.plugins.md → ....docs/2.directory-structure/11.plugins.md b/....docs/2.directory-structure/10.plugins.md → ....docs/2.directory-structure/11.plugins.md
diff --git a/...3.docs/2.directory-structure/11.public.md → ...3.docs/2.directory-structure/12.public.md b/...3.docs/2.directory-structure/11.public.md → ...3.docs/2.directory-structure/12.public.md
diff --git a/...3.docs/2.directory-structure/12.server.md → ...3.docs/2.directory-structure/13.server.md b/...3.docs/2.directory-structure/12.server.md → ...3.docs/2.directory-structure/13.server.md
diff --git a/...ocs/2.directory-structure/13.gitignore.md → ...ocs/2.directory-structure/14.gitignore.md b/...ocs/2.directory-structure/13.gitignore.md → ...ocs/2.directory-structure/14.gitignore.md
diff --git a/...nt/3.docs/2.directory-structure/14.app.md → ...nt/3.docs/2.directory-structure/15.app.md b/...nt/3.docs/2.directory-structure/14.app.md → ...nt/3.docs/2.directory-structure/15.app.md
diff --git a/....docs/2.directory-structure/16.package.md → ....docs/2.directory-structure/17.package.md b/....docs/2.directory-structure/16.package.md → ....docs/2.directory-structure/17.package.md
diff --git a/...docs/2.directory-structure/17.tsconfig.md → ...docs/2.directory-structure/18.tsconfig.md b/...docs/2.directory-structure/17.tsconfig.md → ...docs/2.directory-structure/18.tsconfig.md
diff --git a/docs/content/3.docs/2.directory-structure/7.middleware.md b/docs/content/3.docs/2.directory-structure/7.middleware.md
@@ -0,0 +1,86 @@
+---
+icon: IconDirectory
+title: 'middleware'
+head.title: Middleware directory
+---
+
+# Middleware directory
+
+Nuxt provides a customizable **route middleware** framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.
+
+::alert{type=info}
+Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from server middleware, which are run in the Nitro server part of your app.
+::
+
+There are three kinds of route middleware:
+
+1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
+2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page.
+3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change.
+
+The first two kinds of route middleware can be [defined in `definePageMeta`](/docs/directory-structure/pages).
+
+## Format
+
+Route middleware are navigation guards that receive the current route and the next route as arguments.
+
+```js
+export default defineNuxtRouteMiddleware((to, from) => {
+  if (to.params.id === '1') {
+    return abortNavigation()
+  }
+  return navigateTo('/')
+})
+```
+
+Nuxt provides two globally available helpers that can be returned directly from the middleware:
+
+1. `navigateTo (route: string | Route)` - Redirects to the given route, within plugins or middleware. It can also be called directly on client side to perform a page navigation.
+2. `abortNavigation (err?: string | Error)` - Aborts the navigation, with an optional error message.
+
+Unlike, navigation guards in [the vue-router docs](https://next.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards), a third `next()` argument is not passed, and redirects or route cancellation is handled by returning a value from the middleware. Possible return values are:
+
+* nothing - does not block navigation and will move to the next middleware function, if any, or complete the route navigation
+* `navigateTo('/')` or `navigateTo({ path: '/' })` - redirects to the given path
+* `abortNavigation()` - stops the current navigation
+* `abortNavigation(error)` - rejects the current navigation with an error
+
+::alert{type=warning}
+It is advised to use the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://next.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) may work but there may be breaking changes in future.
+::
+
+## Adding middleware dynamically
+
+It is possible to add global or named route middleware manually using the `addRouteMiddleware()` helper function, such as from within a plugin.
+
+```ts
+export default defineNuxtPlugin(() => {
+  addRouteMiddleware('global-test', () => {
+    console.log('this global middleware was added in a plugin and will be run on every route change')
+  }, { global: true })
+
+  addRouteMiddleware('named-test', () => {
+    console.log('this named middleware was added in a plugin and would override any existing middleware of the same name')
+  })
+})
+```
+
+## Example: a named route middleware
+
+```bash
+-| middleware/
+---| auth.ts
+```
+
+In your page file, you can reference this route middleware
+
+```vue
+<script setup>
+definePageMeta({
+  middleware: ["auth"]
+  // or middleware: 'auth'
+})
+</script>
+```
+
+Now, before navigation to that page can complete, the `auth` route middleware will be run.
diff --git a/...s/2.directory-structure/7.node_modules.md → ...s/2.directory-structure/9.node_modules.md b/...s/2.directory-structure/7.node_modules.md → ...s/2.directory-structure/9.node_modules.md
diff --git a/docs/scripts/gen-docs.ts b/docs/scripts/gen-docs.ts
@@ -6,7 +6,7 @@ import { upperFirst } from 'scule'
 export async function main () {
   const rootDir = resolve(__dirname, '..')
   const configTemplate = resolve(__dirname, 'nuxt.config.md')
-  const configFile = resolve(rootDir, 'content/3.docs/2.directory-structure/15.nuxt.config.md')
+  const configFile = resolve(rootDir, 'content/3.docs/2.directory-structure/16.nuxt.config.md')
   await generateDocs({ configFile, configTemplate })
 }
 

diff --git a/examples/with-middleware/app.vue b/examples/with-middleware/app.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <NuxtExampleLayout example="with-middleware">
+    <NuxtPage />
+
+    <template #nav>
+      <nav class="flex align-center gap-4 p-4">
+        <NuxtLink to="/" class="n-link-base">
+          Home
+        </NuxtLink>
+        <NuxtLink to="/forbidden" class="n-link-base">
+          Forbidden
+        </NuxtLink>
+        <NuxtLink to="/redirect" class="n-link-base">
+          Redirect
+        </NuxtLink>
+      </nav>
+    </template>
+
+    <template #footer>
+      <div class="text-center p-4 op-50">
+        Current route: <code>{{ route.path }}</code>
+      </div>
+    </template>
+  </NuxtExampleLayout>
+</template>
diff --git a/examples/with-middleware/middleware/always-run.global.ts b/examples/with-middleware/middleware/always-run.global.ts
@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware(() => {
+  console.log('running global middleware')
+})
diff --git a/examples/with-middleware/middleware/redirect-me.ts b/examples/with-middleware/middleware/redirect-me.ts
@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { $config } = useNuxtApp()
+  if ($config) {
+    console.log('Accessed runtime config within middleware.')
+  }
+  console.log('Heading to', to.path, 'but I think we should go somewhere else...')
+  return '/secret'
+})
diff --git a/examples/with-middleware/nuxt.config.ts b/examples/with-middleware/nuxt.config.ts
@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})
diff --git a/examples/with-middleware/package.json b/examples/with-middleware/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example-with-middleware",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
+  }
+}
diff --git a/examples/with-middleware/pages/forbidden.vue b/examples/with-middleware/pages/forbidden.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    Forbidden
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  // This is an example of inline middleware
+  middleware: () => {
+    console.log('Strictly forbidden.')
+    return false
+  }
+})
+</script>
diff --git a/examples/with-middleware/pages/index.vue b/examples/with-middleware/pages/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Home
+  </div>
+</template>
diff --git a/examples/with-middleware/pages/redirect.vue b/examples/with-middleware/pages/redirect.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    You should never see this page
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: 'redirect-me'
+})
+</script>
diff --git a/examples/with-middleware/pages/secret.vue b/examples/with-middleware/pages/secret.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    You've landed on a page that wasn't in the menu!
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'named-test'
+})
+</script>
diff --git a/examples/with-middleware/plugins/add.ts b/examples/with-middleware/plugins/add.ts
@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(() => {
+  addRouteMiddleware('global-test', () => {
+    console.log('this global middleware was added in a plugin')
+  }, { global: true })
+
+  addRouteMiddleware('named-test', () => {
+    console.log('this named middleware was added in a plugin')
+  })
+})
diff --git a/examples/with-middleware/tsconfig.json b/examples/with-middleware/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/packages/nuxt3/src/app/nuxt.ts b/packages/nuxt3/src/app/nuxt.ts
@@ -123,7 +123,7 @@ export function createNuxtApp (options: CreateOptions) {
 
 export async function applyPlugin (nuxtApp: NuxtApp, plugin: Plugin) {
   if (typeof plugin !== 'function') { return }
-  const { provide } = await callWithNuxt(nuxtApp, () => plugin(nuxtApp)) || {}
+  const { provide } = await callWithNuxt(nuxtApp, plugin, [nuxtApp]) || {}
   if (provide && typeof provide === 'object') {
     for (const key in provide) {
       nuxtApp.provide(key, provide[key])
@@ -179,9 +179,9 @@ export const setNuxtAppInstance = (nuxt: NuxtApp | null) => {
  * @param nuxt A Nuxt instance
  * @param setup The function to call
  */
-export function callWithNuxt<T extends () => any> (nuxt: NuxtApp, setup: T) {
+export function callWithNuxt<T extends (...args: any[]) => any> (nuxt: NuxtApp, setup: T, args?: Parameters<T>) {
   setNuxtAppInstance(nuxt)
-  const p: ReturnType<T> = setup()
+  const p: ReturnType<T> = args ? setup(...args as Parameters<T>) : setup()
   if (process.server) {
     // Unset nuxt instance to prevent context-sharing in server-side
     setNuxtAppInstance(null)

diff --git a/packages/nuxt3/src/pages/module.ts b/packages/nuxt3/src/pages/module.ts
@@ -2,7 +2,7 @@ import { existsSync } from 'fs'
 import { defineNuxtModule, addTemplate, addPlugin, templateUtils, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
 import { resolve } from 'pathe'
 import { distDir } from '../dirs'
-import { resolveLayouts, resolvePagesRoutes, normalizeRoutes } from './utils'
+import { resolveLayouts, resolvePagesRoutes, normalizeRoutes, resolveMiddleware, getImportName } from './utils'
 import { TransformMacroPlugin, TransformMacroPluginOptions } from './macros'
 
 export default defineNuxtModule({
@@ -40,9 +40,18 @@ export default defineNuxtModule({
 
     nuxt.hook('autoImports:extend', (autoImports) => {
       const composablesFile = resolve(runtimeDir, 'composables')
-      autoImports.push({ name: 'useRouter', as: 'useRouter', from: composablesFile })
-      autoImports.push({ name: 'useRoute', as: 'useRoute', from: composablesFile })
-      autoImports.push({ name: 'definePageMeta', as: 'definePageMeta', from: composablesFile })
+      const composables = [
+        'useRouter',
+        'useRoute',
+        'defineNuxtRouteMiddleware',
+        'definePageMeta',
+        'navigateTo',
+        'abortNavigation',
+        'addRouteMiddleware'
+      ]
+      for (const composable of composables) {
+        autoImports.push({ name: composable, as: composable, from: composablesFile })
+      }
     })
 
     // Extract macros from pages
@@ -69,6 +78,44 @@ export default defineNuxtModule({
       }
     })
 
+    // Add middleware template
+    addTemplate({
+      filename: 'middleware.mjs',
+      async getContents () {
+        const middleware = await resolveMiddleware()
+        await nuxt.callHook('pages:middleware:extend', middleware)
+        const middlewareObject = Object.fromEntries(middleware.map(mw => [mw.name, `{() => import('${mw.path}')}`]))
+        const globalMiddleware = middleware.filter(mw => mw.global)
+        return [
+          ...globalMiddleware.map(mw => `import ${getImportName(mw.name)} from '${mw.path}'`),
+          `export const globalMiddleware = [${globalMiddleware.map(mw => getImportName(mw.name)).join(', ')}]`,
+          `export const namedMiddleware = ${templateUtils.serialize(middlewareObject)}`
+        ].join('\n')
+      }
+    })
+
+    addTemplate({
+      filename: 'middleware.d.ts',
+      write: true,
+      getContents: async () => {
+        const composablesFile = resolve(runtimeDir, 'composables')
+        const middleware = await resolveMiddleware()
+        return [
+          'import type { NavigationGuard } from \'vue-router\'',
+          `export type MiddlewareKey = ${middleware.map(mw => `"${mw.name}"`).join(' | ') || 'string'}`,
+          `declare module '${composablesFile}' {`,
+          '  interface PageMeta {',
+          '    middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>',
+          '  }',
+          '}'
+        ].join('\n')
+      }
+    })
+
+    nuxt.hook('prepare:types', ({ references }) => {
+      references.push({ path: resolve(nuxt.options.buildDir, 'middleware.d.ts') })
+    })
+
     // Add layouts template
     addTemplate({
       filename: 'layouts.mjs',