在 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*时返回。