如何在Nuxt.js中通过Middleware重定向到Login组件？

是可以实现的，有两种适配你当前项目结构的实现方式，同时相关逻辑解释如下：

示例代码逻辑说明 #

你参考的这段代码是Nuxt框架中间件的标准权限拦截写法：

if (!store.state.authenticated) {
    return redirect('/login')
}

逻辑拆解：

• 执行时机：在对应路由的页面渲染之前触发
• 先从Vuex状态管理的store中读取登录状态标识authenticated，判断用户是否登录
• 若判断为未登录，调用Nuxt内置的redirect方法，直接将用户请求重定向到/login路由对应的页面，避免未登录用户访问需要权限的页面

适配你项目的两种实现方案 #

方案1：保留现有布局逻辑，无需跳转路由 #

你当前已经在default.vue布局中做了登录态判断，未登录时直接渲染Login组件，这种场景下不需要做路由跳转，中间件只需做权限校验即可：

1. middleware/authenticated.js代码示例：

export default function ({ store, $auth, route }) {
  // 未登录判断
  if (!$auth.loggedIn || !store.state.authenticated) {
    const publicRouteList = ['/'] // 可自定义不需要权限的公开路由
    // 非公开路由可以在这里加全局提示等逻辑，布局会自动显示登录组件
    if (!publicRouteList.includes(route.path)) {
      console.log('该页面需要登录后访问')
    }
  }
}

该方案优势：访问路径不会变化，用户登录完成后可以直接留在当前要访问的页面，无需额外做跳转回源路径的逻辑。

方案2：采用独立登录页路由，和参考示例逻辑对齐 #

如果要使用redirect('/login')的跳转逻辑，需要先补充对应的路由页面：

1. 新增pages/login.vue文件，内容如下：

<template>
  <Login />
</template>
<script>
import Login from "~/components/Login.vue"
export default {
  components: { Login },
  layout: 'empty' // 可新增空白布局，避免套用default.vue的登录判断逻辑
}
</script>

2. 修改middleware/authenticated.js代码：

export default function ({ store, redirect }) {
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

3. 可同步简化default.vue代码，移除未登录渲染Login组件的分支逻辑，未登录用户会被中间件直接拦截到/login页。

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