Authentication Nuxt-无重定向登录

我试图在我的Nuxt应用程序上创建身份验证，但我找到的每个教程都使用重定向到公共/私有路径

例如：

if (user.isLoggedIn()) {
    redirect('/dashboard')
} else {
    redirect('/login')
}

我习惯于反应方式，在这里我有一个单独的包装器组件，在其中我根据状态决定是否要显示公共登录或私有仪表板页面

索引页路由路径“/”的示例：

export default = ({ viewer }) =>
   viewer.isLoggedIn ? <Dashboard /> : <Login />

有没有办法在Nuxt中实现这一点？

您必须在Page.vue文件中设置一个动态布局参数

第一步，在页面中设置动态布局。vue：

export default {
  layout (context) {
    return context.isLoggedIn ? 'privateLayout' : 'publicLayout';
  }
}

第二步，从中间件身份验证在存储中设置上下文自定义var或更好：

export default function (context) {
   context.isLoggedIn = true; //or false, insert your auth checking here
}

见文件：

---

请参阅实时示例：

您可以将索引页用作两个组件的包装，这两个组件的显示取决于用户是否登录。因此，在index.vue中：

<template>
  <div class="wrapper">
    <dashboard v-if="userIsLoggedIn" />
    <login v-else />
  </div>
</template>

然后，您可以将仪表板和登录组件作为单独的页面编写，甚至可以通过使userIsloggedIn成为反应式来在它们之间动态切换

---

希望这更符合您的要求。

谢谢，但我对问题的描述可能不正确。这只会更改路由器包装器或外壳的布局。我想做的是，用户在索引页上。若他已登录，则在索引上显示登录页面，否则在索引上显示仪表板页面。