Nuxt - 无需重定向登录

提问于 2024-04-27T17:54:58+08:00

浏览次

0

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

例：

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

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

索引页面示例（路径路径'/'）：

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

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

2 回答

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

第一步，在Page.vue中设置动态布局：
```
export default {
  layout (context) {
    return context.isLoggedIn ? 'privateLayout' : 'publicLayout';
  }
}
```
第二步，从中间件auth设置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
回复于 2024-04-27T17:54:58+08:00
0
您可以使用索引页作为两个组件的包装，根据用户是否登录显示 . 所以在index.vue中：
```
<template>
  <div class="wrapper">
    <dashboard v-if="userIsLoggedIn" />
    <login v-else />
  </div>
</template>
```
然后，您可以将仪表板和登录组件编写为单独的页面，甚至可以通过使 userIsloggedIn 被动来在它们之间动态切换 .

希望这更像你正在寻找的东西 .
回复于 2024-04-27T17:54:58+08:00

相关问题