題目
任務目標：完成一個具有「保護機制」的開發者專區。
- 在
src/pages/下建立一個admin.astro頁面。 - 在
src/middleware.ts中撰寫邏輯：如果使用者訪問/admin且 URL 參數沒有包含?pass=123，就將其重定向到首頁。 - 提示：使用
context.url.searchParams.get('pass')。 - 性能檢查：執行
npm run build。觀察終端機輸出的檔案大小，看看 Astro 是如何 將你的 React 組件和 Markdown 打包成極小的檔案。 - 最終挑戰：將這個專案成功部署到網路上，並把網址分享給朋友。
目前專案結構
📁 .astro/
📁 .vscode/
📁 node_modules/
📁 public/
└─ favicon.svg
📁 src/
├─ 📁 actions/
│ └─ index.ts
├─ 📁 components/
│ ├─ DescriptionControl.jsx
│ ├─ LikeButton.jsx
│ ├─ PostsQuote.astro
│ ├─ RandomQuote.astro
│ └─ ServerTime.astro
├─ 📁 content/
│ ├─ 📁 blog/
│ │ └─ post-1.md
│ └─ config.ts
├─ 📁 layouts/
│ └─ BaseLayout.astro
└─ 📁 pages/
│ ├─ 📁 posts/
│ │ └─ [id].astro
│ ├─ about.astro
│ ├─ blog.astro
│ └─ index.astro
└─ middleware.ts
.env
.gitignore
astro.config.mjs
package-lock.json
package.json
README.md
tscon
1_新增 src/pages/admin.astro
---
import BaseLayout from '../layouts/BaseLayout.astro'
const pageTitle = '後臺管理'
---
<BaseLayout pageTitle={pageTitle}>
<h2>還沒想到要放什麼</h2>
</BaseLayout>
2_修改 src/middleware.ts
import { defineMiddleware } from "astro:middleware";
export const onRequest = defineMiddleware(async (context, next) => {
console.log(`有人訪問了：${context.url.pathname}`);
if (context.url.pathname.startsWith('/admin')) {
const pass = context.url.searchParams.get('pass');
if (pass != "123") {
// 如果沒有登入，就跳轉回首頁
return context.redirect('/');
}
}
// 繼續執行後續的請求
const response = await next();
return response;
});
3_修改 src/layouts/BaseLayout.astro
- nav 增加 admin 連結
- 自訂 admin 連結動作 (不知道這題是不是這樣做)
...(省略)
<body class={_bodyClass}>
<nav>
<a href="/">首頁</a>
<a href="/about">關於我</a>
<a href="/blog">部落格</a>
<a href="/admin" id="navAdminHref">後臺管理</a>
</nav>
<h1>{pageTitle}</h1>
<slot />
<footer>
<hr />
<p>© 2024 我的 Astro 學習筆記</p>
</footer>
<script>
const navAdminHref = document.getElementById('navAdminHref')
navAdminHref!.addEventListener('click', (e) => {
e.preventDefault()
console.log('點擊 Admin', e)
const password = prompt('請輸入密碼')
location.href = '/admin?' + `pass=${password}`
})
</script>
</body>
...(省略)
