标签: nuxtjs3

我正在尝试对不同的 API 进行 JWT 身份验证。

由于 @nuxtjs/auth-next 似乎不是最新的，而且据我所知，可以在 Nuxt 3 中使用新的全局方法 fetch 而不是 @nuxtjs/axios （也不是最新的），我认为它自己编写身份验证代码不会太难！但这对我来说仍然是个谜，我只找到了 Vue 项目的文档（使用 Pinia 来保持用户登录），我有点迷失了。

我想实现的目标：

• 包含电子邮件和密码的登录页面，登录请求发送到 API（编辑：完成！）
• 从 API 获取 JWT 令牌和用户信息（编辑：完成！）并存储两者（即使页面刷新也保持用户记录）
• 将 JWT 令牌全局设置为标头 $fetch 请求（？），这样我就不必将其添加到每个请求中
• 如果用户未登录，则不允许访问其他页面

对此有什么帮助吗？

这是我的 login.vue 页面（之后我必须使用 Vuetify 和 vee-validate，但还是一次一步！）

// pages/login.vue
<script setup lang="ts">
import { useAuthStore } from "~/store/auth";

const authStore = useAuthStore();

interface loginForm {
  email: string;
  password: string;
}

let loginForm: loginForm = {
  email: "",
  password: "",
};

function login() {
  authStore.login(loginForm);
}
</script>

<template> …

如何全局设置 useFetch 可组合项中使用的 baseUrl（可能是 nuxt.config.ts）？

如何避免在每次 useFetch 中定义它？

我在新的 Nuxt3 应用程序之上设置 Pinia 并启动开发服务器，按顺序使用以下命令：

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm install @pinia/nuxt
npm run dev

开发服务器运行没有任何问题。然后，我将这行代码放入“nuxt.config.ts”中；

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm install @pinia/nuxt
npm run dev

而且，当我再次尝试连接到开发服务器时，它在终端中给出了以下错误消息：

 ERROR  Cannot start nuxt:  Cannot find module 'pinia/dist/pinia.mjs'                                                                     12:03:55
Require stack:
- C:\Users\user\Documents\github2\nuxt-app\index.js

我创建了 Nest js 项目，如下所示。

nest new project-name

并从 nuxt3 导入以下内容，其类型为module带有文件扩展名的 Node js mjs（导入的类型定义不需要编写 mjs）。

import { ViteBuildContext, ViteOptions, bundle } from '@nuxt/vite-builder-edge';

它给了我以下错误。

Uncaught Error Error [ERR_REQUIRE_ESM]: require() of ES Module c:\project\node_modules\@nuxt\vite-builder-edge\dist\index.mjs not supported. Instead change the require of c:\project\node_modules\@nuxt\vite-builder-edge\dist\index.mjs to a dynamic import() which is available in all CommonJS modules.

所以我尝试添加"type": "module"package.json 所以现在我收到以下错误。

Uncaught ReferenceError ReferenceError: exports is not defined in ES module scope This file is being treated as an ES module because …

有谁知道是否可以订阅 Pinia 中的特定操作？我知道有一种方法可以订阅所有操作，如下所示：

const subscribe = someStore.$onAction(callback, false)

但这意味着我必须将操作名称与回调中我想要的操作名称进行比较，如下所示：

websocketStore.$onAction(
  ({name}) => {
    if (name === 'specificAction') {
      console.log('do something')
    }
  }
)

所以我想知道是否有更好的方法？（我将 Pinia 与 Nuxt3 一起使用）

我刚刚开始使用 Nuxt 3，在使用打字稿功能时遇到了一些问题。

我正在尝试构建一个通用的导航栏，它可以有多个带有不同链接的按钮。为此，我想创建一个可以作为数组传递给组件的接口。

就像是：

interface Button {
  icon: string,
  link: string
}

有没有办法让界面在整个项目中可见？我找不到很多有关 Nuxt 打字稿集成的信息。

我只是想在标签中添加一个script块head。

例子

<script>
    alert('hello, world!');
</script>

我花了几个小时来找出解决方案，解决像这样简单的问题。关于添加脚本有很多答案，但没有针对inline脚本的答案blockNuxt 3

我们怎样才能做到这一点Nuxt 3？

我正在尝试在 Nuxt 3 应用程序中使用 NuxtLink 来使用路线，它正在更改路线，但它没有显示任何内容。但是，如果我刷新或重新加载之前为空白的更新路线，那么它会正常显示其内容。

/pages/index.vue

<template>
  <div>
    <h1>It's Nuxt3!</h1>
    <p>Home Page</p>
  </div>
  <NuxtLink to="/user">User</NuxtLink>
</template>

/pages/user.vue

<template>
  <div>
    <h1>It's Nuxt3!</h1>
    <p>User Page</p>
  </div>
</template>

文件夹结构和插图：

（在多次编辑我原来的问题后，我决定彻底修改它，使其更加清晰和简洁。这是根据StackOverflow 的建议。）

设置：

创建一个新的 Nuxt 3 项目：

pnpm dlx nuxi init test-project
cd test-project
pnpm i
pnpm run dev -o

app.vue像这样编辑：

<script setup>
const { data: thing } = useFetch("http://localhost:8000/things/1").then(res => {
  console.log(res)
  return res
})
</script>

<template>
  <div>
    <p>{{ thing }}</p>
  </div>
</template>

我添加了 console.log-statement 来跟踪提取发生的位置。

没有对配置进行任何更改。据我了解，Nuxt 3 默认为 SSR。

问题：

两种情况：

I. 当对代码进行更改app.vue并因此触发 HMR 时thing，将包含来自 API 的预期数据。

二. 但是，当浏览器刷新页面时thing将为空。段落标签将为空。

我的观察：

• 相同的行为适用于 useAsyncData()。
• 每次我触发 HMR（场景一）时，客户端都会向 API 发出请求并成功接收数据（如开发人员工具的网络选项卡中所示）。
• 每当我在浏览器中刷新页面（场景二）时，我都会在终端中收到一份控制台日志，在浏览器控制台中收到一份控制台日志。两者都包含状态代码 500 的错误和消息“fetch …

Store (Pinia) 与 UseState

如果我没记错的话，useState可以更换任何商店吗Pinia？鉴于这useState使得 ref 可在所有组件之间共享，我很难知道是否应该使用 store 或 useState ref。例如，假设我有一个currentUser (firstName, lastName, email)在页面加载时从远程 API 获取的数据。我应该将此信息存储在PiniauserStore 中还是存储在useState('currentUser')?

该主题的最佳实践是什么？

useState() 文档： https: //v3.nuxtjs.org/api/composables/use-state

Pinia 文档： https: //pinia.vuejs.org/core-concepts/