Nuxt Auth Module 中间件使用指南

Nuxt Auth Module 中间件使用指南

什么是中间件

在 Nuxt.js 中，中间件是一种在页面渲染前执行的函数，常用于处理权限验证、数据预取等逻辑。Nuxt Auth Module 提供的中间件功能可以方便地实现路由级别的认证控制。

中间件的两种启用方式

1. 路由级别启用

在单个页面组件中启用 auth 中间件：

export default {
  middleware: 'auth'
}

当用户访问该路由时，如果未登录（loggedIn 为 false），将被重定向到登录页面（默认为 /login）。

2. 全局启用

在 nuxt.config.js 中全局启用：

// nuxt.config.js
export default {
  router: {
    middleware: ['auth']
  }
}

全局启用后，所有路由都会进行认证检查。如果某些页面不需要认证，可以通过以下方式排除：

export default {
  auth: false
}

特殊场景处理

访客模式

对于仅允许未登录用户访问的页面（如登录页、注册页），可以使用 guest 模式：

export default {
  auth: 'guest'
}

当已登录用户访问这些页面时，会被重定向到首页（默认为 /）。

实际应用建议

1. 混合使用：建议全局启用中间件，然后对不需要认证的页面（如登录页、帮助页）显式设置 auth: false。

2. 自定义重定向：可以在模块配置中修改默认的重定向路径：

   // nuxt.config.js
   export default {
     auth: {
       redirect: {
         login: '/custom-login',  // 未登录重定向
         home: '/dashboard'       // 已登录重定向
       }
     }
   }
   

3. 动态权限：对于更复杂的权限控制，可以结合自定义中间件实现：

   // middleware/admin.js
   export default function({ store, redirect }) {
     if (!store.state.auth.user.isAdmin) {
       return redirect('/403')
     }
   }
   

常见问题

1. 中间件执行顺序：当使用多个中间件时，它们在数组中的顺序决定了执行顺序。

2. SSR 兼容性：中间件在服务端和客户端都会执行，确保其中的逻辑兼容两种环境。

3. 性能考虑：全局中间件会增加每个路由切换的开销，对于性能敏感的应用要谨慎使用。

通过合理使用 Nuxt Auth Module 的中间件功能，可以轻松构建安全的认证系统，保护应用中的敏感路由。