标签: nuxtjs

当前文档中尚不清楚，因为fetch方法发生了重大变化。据我了解，在文档中它说：

fetch(context) 已被弃用，您可以在页面中使用匿名中间件： middleware(context)

所以context已经不能用了？那么什么被传递到新 fetch方法中呢？

你如何进入store的context？比如在2.12.2之前，我们可以使用fetch如下方法：

// pages/index.vue
async fetch ({ store }) {
  await store.dispatch('....')
},

因此，我认为上面的代码将来不会在 Nuxt 3 中很快运行。那你在一个页面的时候怎么填充店铺数据呢？

目前，似乎你仍然可以访问context的第一个参数的新 fetch方法。将来怎么办？

我可能对这个概念仍然有点困惑。但。在这种情况下，我有一个联系表单，在发送时，它会调用我自己的 laravel 后端 api，它将为我处理发送电子邮件功能。

我想使用 api 密钥来保护它，但我不希望我的 api 密钥暴露在前端的任何地方。我的 Vue/Nuxt 应用程序正在服务器上运行。

所以环境变量应该是答案 - 我猜。不过，如果我这样做：

this.$axios.$post('http://localhost/someMailFunc?apk=' + process.env.API_KEY, {
                    name: name,
                    subject: subject,
                    email: email,
                    message: message,
                }).then(response => {
                    // somecomplete
                }).catch(e => {
                    // somecatch
                })

当然，在代码中它是隐藏的，但是在前端检查它，可见的地方都是 api 密钥。

如果密钥是当今的解决方案，那么推荐使用密钥进行安全保护的方法是什么？

我已经尝试了我能想到的所有方法，但无法将“阅读更多”超链接放置在父行的底部，因此“阅读更多”位于容器的右下角。对齐或对齐的组合似乎没有帮助。

文章图像应该位于左侧，然后文章标题位于图像的右侧，“阅读更多”位于整个面板的右下角。我认为最简单的方法是将超链接的列与 v 行的底部对齐，然后仅使用 text-right 进行格式化。

  <v-row>
    <v-col>
      <h1 style='display: inline'>{{article.title}}</h1> <span style='font-size: x-small'>{{article.month}}.{{article.day}}.{{article.year}}</span>
    </v-col>
  </v-row>
  <v-row style='padding: 0px; margin-top: -25px; margin-bottom: -15px'>
    <v-col>
      <hr>
    </v-col>
  </v-row>
  <v-row>     
    <v-col md='4' class='text-center'>
      <img :src="article.image" class='article-image'>
    </v-col>      
    <v-col>
      <v-row>
        <v-col>
          <p>{{article.header}}</p>
        </v-col>
      </v-row>
      <v-row>
        <v-col class='text-center'>
          <a>>>> Read More <<<</a>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

最终的解决方案，包括两个阅读部分：

<template>
<v-container fluid class='content-body'>
  <v-row>
    <v-col cols="12">
      <h1 class="ml-2" style="display: inline">{{ item.title }}</h1>
      <span style="font-size: x-small">{{ item.date }}</span>
    </v-col>
    <v-col style='padding: 0; margin-top: -15px; margin-bottom: -15px' cols="12"> …

我正在使用 Laravel 8，并且一直在尝试遵循SPA 身份验证的 sainttum 文档。我已经完成了所需的必要配置设置。后端服务器在默认端口 (80) 的 localhost 上运行，而 SPA 客户端在 localhost:3000 上运行。我正在使用 nuxt 框架为带有 axios 的客户端发出请求。

应向 /sanctum/csrf-cookie 发出初始请求以初始化 CSRF 保护 cookie，以下是网络流量显示的内容

第二个请求是实际请求，应包含第一个域请求发送的 cookie，但看起来 XSRF-TOKEN 被跳过。网络流量如下所示

sainttum.php 配置文件：

<?php
return [
    'stateful' => explode(',', env(
        'SANCTUM_STATEFUL_DOMAINS',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1'
    )),
    'expiration' => null,
    'middleware' => [
        'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class,
        'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class,
    ],
];

cors.php 配置文件：

<?php
return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*', 'localhost:3000'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => …