Nuxt - 无需重定向登录

Question

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

示例：

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

我曾经采取过反应的方式，我有一个单独的包装器组件，我根据状态决定是否要显示公共（登录）或私人（仪表板）页面。

索引页面示例（路径路径＆＃39; /＆＃39;）：

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

有没有办法在Nuxt中实现这个目标？

Answer 1

您必须在Page.vue文件中设置动态layout参数。

第一步，在Page.vue中设置动态布局：

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

第二步，从中间件身份验证中设置Context自定义var（或更好，在您的Store中）：

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

请参阅文档：https://nuxtjs.org/api/pages-layout#the-layout-property

查看实例：https://glitch.com/edit/#!/nuxt-dynamic-layouts?path=pages/index.vue:10:8

Answer 2

您可以使用索引页作为两个组件的包装，根据用户是否登录显示。所以在index.vue中：

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

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

希望这更像你正在寻找的东西。