在 Nuxt asyncData 中使用 axios 在浏览器刷新时丢失令牌

Question

我在 Nuxt 的 Axios 中使用 asyncData 从 API 获取元标记，但我的问题是必须在服务器端设置元描述才能出现在代码中。
所以我添加了以下我的 nuxt 页面：

asyncData(context) {
  return context.$axios
    .get('/api/house', {
      headers: {
        'X-AUTH-TOKEN': '######',
        'Content-Type': 'application/json',
      },
    })
    .then((res) => {
      return { fetchedData: res.data.page.meta }
    })
},

起初元描述在代码中，但如果我刷新浏览器，我会丢失令牌。

我尝试将其添加到 nuxt.config.js 中：

axios: {
  headers: {
    common: {
      'X-AUTH-TOKEN': '###################',
      'Content-Type': 'application/json',
    },
  },
},

像这样我在想每个axios GET请求都会有令牌服务器端而不会丢失但是它不起作用。所以我尝试设置一个 axios 拦截器制作一个 axios.js 并将其添加到 nuxt.config.js :

plugins: [
  { src: '~/plugins/axios.js' },  
]

我的axios.js:

import axios from 'axios'

const AUTH_TOKEN = '#######################'

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN

axios.defaults.headers.post['Content-Type'] = 'application/json'

但是每次我刷新我的 Nuxt 页面时结果都是一样的，令牌消失了并且因为我使用 asyncData 页面没有呈现。

如何使用 asyncData 设置我的元描述并将我的令牌添加到每个 GET 请求，即使我刷新浏览器？

编辑

以下是我如何在我的 nuxt 页面中为元标记发出客户端请求：

<script>
export default {
  layout: 'house',

  asyncData(context) {
    return context.$axios
      .get('/api/house', {
        headers: {
          'X-AUTH-TOKEN': '### TOKEN HARDCODED ###',
          'Content-Type': 'application/json',
        },
      })
      .then((res) => {
        return { fetchedData: res.data.page.meta }
      })
  },

  data() {
    return {
      route: 'house',
      fetchedData: [],
    }
  },
  head() {
    return {
      title: this.fetchedData.title,
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: this.fetchedData.description },
      ],
    }
  },
}
</script>

Answer 1

好吧，这里有一个 codesandbox 向您展示带有测试伪造的工作示例 API：https://codesandbox.io/s/so-async-data-nuxt-axios-get-f4y3v?file=/pages/index.vue

这是真正有趣的代码

<template>
  <div>
    <p>fetched data below</p>
    <p>{{ fetchedData }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, $config: { secureToken } }) { // import your env varibles here
    const response = await $axios.$get( // $get shortcut, https://axios.nuxtjs.org/usage#-shortcuts
      'https://jsonplaceholder.typicode.com/todos/1',
      {
        headers: {
          'X-AUTH-TOKEN': secureToken,
          'Content-Type': 'application/json',
        },
      }
    )
    return { fetchedData: response }
  },
}
</script>

当然，您可以对 secureToken 进行硬编码，但在这里，我向您展示了如何使用环境变量。

这是 nuxt.config.js 文件的一部分

export default {
  publicRuntimeConfig: {
    secureToken: process.env.SECURE_TOKEN,
  },
  ...
}

你应该放入一个 .env 文件。

SECURE_TOKEN="### TOKEN HARDCODED ###"

当然需要从 .gitignore 中将其列入黑名单（顺便说一句，默认行为）。我提交它是为了 示例目的 ，不要公开它。在你的服务器上使用环境变量！ :)

一旦成功，您可以查看一些 axios 全局配置。在继续之前让我知道这个是否正常工作。

在 Nuxt asyncData 中使用 axios 在浏览器刷新时丢失令牌

Using axios in Nuxt asyncData lose token on browser refresh

axios

nuxt.js

token

asyncdata