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

Posted 2023-02-23

【中文标题】在 Nuxt asyncData 中使用 axios 在浏览器刷新时丢失令牌

【英文标题】：Using axios in Nuxt asyncData lose token on browser refresh

【发布时间】：2021-06-23 04:27:54

【问题描述】：

我在 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>

【问题讨论】：

您应该专注于您的第一个代码 sn-p 并查看为什么此时令牌不存在。你有硬编码还是从某个地方获取它？更多的是一个异步问题，而不是一个 tbh 的配置。

感谢您回答我令牌在页面中是硬编码的

顺便说一句，“必须在服务器端设置元描述”是什么意思？您无法在客户端上拨打电话？这是一个基本的 API，不是吗？尝试在客户端上创建它，然后在网络开发工具中查找要发送到后端的内容。

因为如果我不使用 asyncData 在服务器端获取它，元描述内容会显示为“未定义”，我试图通过以下方式获取它的客户端：async mount() await axios ... 但只有元标题出现

您正在使用asyncData 服务器端？这意味着您的应用程序是 universal 并且您禁用客户端 JS 只是为了尝试这个？我只是想确保您了解asyncData 既是服务器 又是 客户端，据我所知，您在此处进行的调用是客户端。顺便说一句，它也应该完全在客户端工作。它是否适用于类似邮递员的请求？我们可能可以尝试看看为什么它不能在客户端工作，因为错误可能来自这里。

【参考方案1】：

好的，下面是一个代码框，向您展示带有测试假 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 进行硬编码，但在这里，我向您展示了如何使用 env 变量。

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

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

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

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

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

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

【讨论】：

wowo 谢谢Kisu，它工作得很好……我用我的令牌创建了一个.env，你的权利对安全性更好，并使用你的例子，我可以在所有页面中获得元描述，这太棒了。 ..现在因为我在 axios 中使用代理选项，所以我必须解决为什么我在更改路由切换页面时遇到 cors 策略问题..