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

问题描述

我在 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': '###################',

像这样我在想每个 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 ###',})
      .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>

解决方法

好的，这里是一个代码沙盒，向您展示带有测试假 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 全局配置。在继续之前让我知道这个是否正常工作。