Nuxt.js如何用auth中间件保护登录、注册、找回密码等多个页面

你当前的中间件逻辑仅将/account/login设为未登录状态下可访问的路径，其余所有路径未登录访问都会被重定向到登录页，因此注册、账号找回页也被拦截了，可以通过调整中间件逻辑实现需求，具体修改如下：

export default function({ app, route, redirect }) {
  // 定义不需要登录即可访问的公开路由白名单
  const publicRoutes = [
    '/account/login',
    '/account/register',
    '/account/retrieve'
  ]
  // 判断当前路由是否为公开路由
  const isPublicRoute = publicRoutes.includes(route.path)

  if (isPublicRoute) {
    // 访问公开路由时，已登录用户直接跳转到首页
    if (app.$fire.auth.currentUser) {
      return redirect('/')
    }
    return // 未登录用户正常访问公开路由
  }

  // 访问非公开路由时，未登录用户跳转到登录页
  if (!app.$fire.auth.currentUser) {
    return redirect('/account/login')
  }
}

• 你可以根据项目实际的注册、账号找回页路径，调整publicRoutes数组中的路径值
• 后续如果有其他不需要登录即可访问的页面，直接添加到白名单数组即可，逻辑可复用性更高
• 已登录用户访问登录、注册这类公开路由时，依然会保持原有逻辑自动跳转到首页，符合常规产品体验

内容的提问来源于stack exchange，提问作者Sebas Araque