Nuxt js <nuxt-link />身份验证

Question

我在nuxt中有一个只有登录用户才能访问的路由: /dashboard/secret。

在/dashboard页面中，我有一个类似这样的链接：

<nuxt-link to="/dashboard/secret">Link to "secret" page</nuxt-link>

单击时，nuxt将从

myapp.com/_nuxt/pages_dashboard_secret.js

如何为nuxt路由添加身份验证，以阻止用户手动转到url并读取内容？

是的，实际的秘密数据将从外部api获取，它将验证用户令牌，但人们甚至可以看到这个页面的html似乎仍然是错误的。

Answer 1

如果你只是想保护一个js文件，这样做是错误的。但是，如果您只是想保护路由不被用户手动访问，那么您必须尝试Nuxt Middlewares，并编写一个用于身份验证和用户获取的中间件。

中间件结构可以像下面这样简单：

export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

您可以简单地在根(或secretPage)布局中使用它：

<template>
  <h1>Secret page</h1>
</template>

<script>
export default {
  middleware: 'authenticated'
}
</script>

Answer 2

你可以使用nuxt/auth包，这是你的工作的情况，可以作为一个插件和模块，你可以检查它是否有be可访问的页面，它自动运行并具有语义结构。

Answer 3

您不能将您的秘密保存在客户端(在您的JS代码中)，每个使用您的应用程序的人都可以从他的浏览器中获得它。您需要将密钥保存在服务器端，并制作一些验证端点来提供用户是否有效，或者只是在登录后保留他的会话。