在 Nuxt 项目的 middleware 目录里面新建一个文件，名字是 auth.ts，注意这个文件的名字里面没有添加 .global 后缀，所以它不是一个全局中间件。

在这个文件里定义并导出一个中间件，默认导出 export default，执行 defineNuxtRouteMiddleware ，提供一个函数。函数里面先在控制台上输出一行文字 👮 auth 中间件 。

然后打开要使用这个中间件的页面，比如 posts/[id]/edit，在这个页面组件的脚本里，用一个 definePageMeta，提供一个对象，里面添加一个 middleware 属性，它的值是一个数组，数组里的项目就是要在这个页面上使用的路由中间件，比如添加一个 auth。

在浏览器上测试一下，访问一下 关于，还有内容，都没有输出 auth 中间件，再访问一下某个内容的编辑页面，/posts/3/edit。这回就在控制台上输出了 auth 中间件。说明在当前这个页面上使用了 auth 这个路由中间件。

访问这个页面的时候，如果用户没有登录可以把用户重定向到登录页面。在 pages 里新建一个页面，名字是 login.vue，文件里添加一组 template，里面是一组 div，文字是用户登录。

在路由中间件里如果你想把用户带到其它页面，可以让中间件返回执行 navigateTo 得到的结果。如果你想终止跳转路由的行为，可以让中间件返回执行 abortNavigation() 得到的结果。

继续编辑 auth 这个中间件，声明一个 isLoggedIn ，手工设置一下它的值，比如 false，下面判断一下，如果 !isLoggedIn ，可以让中间件返回，执行 navigateTo 以后得到的结果，提供一个 /login。这样如果页面使用了这个中间件，isLoggedIn 的值如果是 false，就会被重定向到 /login 这个地址。

在浏览器测试一下，访问 /posts/3/edit，内容编辑页面用了 auth 中间件，在这个中间件里，如果 isLoggedIn 的值是 false，就会打开 /login 这个地址。

手工再修改一下 auth 中间件里的这个 isLoggedIn 的值，改成 true。 再试一下访问 /posts/3/edit，这回就正常打开了这个内容编辑页面。