访问 MDX 页面或 Astro 组件中的 Astro 全局对象

Question

我有一个 TypeScript 库，在给定条件下，它应该重定向到错误页面。
一种方法是使用内部 Astro 全局对象，例如

Astro.redirect('/404')

。不幸的是，渲染 MDX 页面时

Astro

似乎无法访问。

这是一个 MWE，为简单起见，我使用

Astro.url

。

foo.mdx

：

---
layout: ./foolayout.astro
---

hello

foolayout.astro

：

---
import {url} from "./foolib.ts";
---
{url}
<slot />

foolib.ts

：

export const url = Astro.url; 

这给出了错误：

Astro is not defined

。

请注意，如果我在布局文件中使用 Astro 全局对象，则不会出现错误。那就是：

foolayout.astro

：

---
---
{Astro.url}
<slot />

但是，当满足给定条件时，我需要从 TypeScript 库使用它。

编辑-

Astro.redirect

此编辑是为了澄清我的实际用例，涉及

Astro.redirect()

。

图书馆会是这样的：

foolib.ts

：

export function redir(): void {
   // Check some condition and possibly...
   return Astro.redirect('/404')
} 

因此，布局将是：

foolayout.astro

：

---
import { redir } from "./foolib.ts";
redir();
---
<slot />

这再次引发了 Astro 的未定义错误。

在这种情况下，如果尝试从布局 frontmatter 中使用 Astro global：

foolayout.astro

：

---
// Check some condition and possibly...
return Astro.redirect('/404');
---
<slot />

我们在 Astro 控制台中得到一个

undefined

。

我们可以用

.astro

文件替换 MDX。

foo2.astro

：

---
import Layout from "./foolayout.astro";
---
<Layout>
hello
</Layout>

使用第一个布局，导入

foolib

，我们得到同样的错误；对于第二个，在 frontmatter 中使用 Astro global ，我们得到一个更具描述性的错误：

ResponseSentError
Unable to set response.
The response has already been sent to the browser and cannot be altered.

这表明

Astro

全局可以从 Astro 组件访问，正如这篇 Reddit 帖子中所述。

Answer 1

如果你想进行重定向，你需要从 frontmatter 进行。下到 HTML 中已经太晚了。尝试这样的事情：

---
import lib from "./foolib.ts";

const res = lib.getSomething()
if (res === undefined) { // or similar condition
   return Astro.redirect('/404')
}
---

<slot />