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中间件并编写用于身份验证和用户获取的中间件。

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

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包，这是您工作的情况，可以用作插件和模块，您可以检查是否可以访问页面，它会自动运行并具有语义结构。

Answer 3

你不能在客户端（在你的 JS 代码中）保守你的秘密，每个使用你的应用程序的人都可以从他的浏览器中获取它。您需要在服务器端保存密钥，并创建一些验证端点来提供用户是否有效或仅在登录后保留其会话。