小编Cla*_*ire的帖子

我正在尝试对不同的 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> …

我在 Nuxt 项目中使用 Vuetify。no-data通过使用a 中的插槽，v-data-table我能够修改“无可用数据”消息。如果我使用 prop ，它也可以工作no-data-text。

<v-data-table>
  <template slot="no-data">
    My no data message
  </template>
</v-data-table>

或者

<v-data-table no-data-text="My no data message"></v-data-table>

由于 v-select 的文档显示了相同的 prop 和 slot，我也尝试更新该消息，但仍然显示“无可用数据”而不是我自己的消息。难道我做错了什么？

我发现的唯一可能相关的其他主题是https://github.com/vuetifyjs/vuetify/issues/2081

预先感谢您的任何帮助！