首页 » 在 Nuxt 中开始使用 Axios

在 Nuxt 中开始使用 Axios

本教程中,我们将学习如何使用 Axios 模块在 应用程序中发出请求。我们还将学习如何使用方法在服务器端获取数据以及两种方法之间的区别。最后,我们将学习如何使用 Auth 模块向我们的应用程序添加身份验证。 提供了一个 Axios 模块,可以轻松与您的应用程序集成。Axios 是一个基于 Promise 的 HTTP 客户端,工作在浏览器和  环境中,或者更简单地说,它是一个在客户端应用程序和 环境中发出请求(例如 API 调用)的工具。 在本教程中,我们将学习如何使用 Axios 模块以及如何使用asyncData和 fetch在服务器端发出请求。这两种方法在服务器端发出请求,但它们有一些差异,我们也将介绍这些差异。最后,我们将学习如何使用 auth 模块和 auth 中间件执行身份验证和保护页面/路由。 本文需要和 Vuejs 的基本知识,因为我们将在此基础上进行构建。对于那些没有 Vuejs 经验的人,我建议您先从他们的官方文档和Nuxt 官方页面开始,然后再继续阅读本文。

请注意当上面的选项中提供了端点时

请注意,当上面的选项中提供了端点时,该auth方法效果最佳。user 在auth配置对象内部,我们有一个redirect选项,可以将登录路由设置为/,注销路由设置为/,家庭路由设置为/my-reports,这些路由都将按预期运行。我们还有一个tokenType属性,表示 Axios 请求 阿尔巴尼亚手机号码列表  标头中的授权类型。它Bearer默认设置为,可以更改为与您的 API 配合使用。 对于我们的 API,没有令牌类型,这就是我们将其保留为空字符串的原因。代表tokenNameAxios 请求中标头内的授权名称(或您想要附加令牌的标头属性)。 默认情况下,它设置为,Authorization但对于我们的 API,授权名称是x-auth。该autoFetchUser属性用于启用用户user在登录后使用端点属性获取对象。这是true默认的,但我们的 API 没有端点,user因此我们将其设置为false。 对于本教程,我们将使用本地策略。在我们的策略中,我们有带有登录、用户和注销端点的本地选项,但在我们的例子中,我们只会使用该选项,*login*因为我们的演示 API 没有端点,并且我们的用户对象在成功*logout*时返回。

块没有注册端点选项

注意: 该auth模块没有注册端点选项,因此这意味着我们将采用传统方式注册并将用户重定向到登录页面,我们将在其中使用 这是用于验证用户身份的方法。它接受“策略”(例如local)作为第一个参数,然后接受一个用于执行此身份验证的对象。看一下下面的例子。
在这里,我们有一个表单,其中包含标题、位置和评论的输入字段,并使用v-我们还有一个带有submit点击事件的按钮。在脚本部分,我们有一个方法可以收集表单中提供的所有信息,并使用  AERO领先 发送到我们的服务器,因为 API 还设计为接受图像和视频。 它formData使用调度方法附加到 Vuex 操作,如果请求成功,您将被重定向到/my-reports一条通知,通知您此请求已成功,否则,您将收到错误消息通知。 目前,reportIncident我们的商店中还没有任何操作,因此在您的浏览器控制台中,如果您尝试单击此页面上的“提交”,您会看到错误。
 
 

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注