---
# System prepended metadata

title: "\U0001F3C5Day 12 - Axios 基礎練習 (2) - 註冊登入功能"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day 12 - Axios 基礎練習 (2) - 註冊登入功能

## 註冊功能

在進行註冊的時候，需要利用 POST 的方式並帶入「信箱」、「密碼」、「暱稱」這三個資料，

若成功的話則會回傳一組 UID 使用者的識別碼。反之，若失敗的話則會回傳相關 error 訊息。

可以參考下面的範例：

<iframe height="300" style="width: 100%;" scrolling="no" title="React 直播班每日任務 - React 基礎練習 (2) - JSX 屬性練習" src="https://codepen.io/fhljksmg-the-styleful/embed/jEqgPdM?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yen-kg/pen/gOVzZyg">
  React 直播班每日任務 - React 基礎練習 (2) - JSX 屬性練習</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

題目
---

請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/YzmLdoq?editors=1010)。串接登入的 API，並且將成功 or 失敗的訊息顯示在畫面上。( 或是使用 alert 顯示成功即可 )


備註：[詳細可以參考 API 文件](https://todolist-api.hexschool.io/doc/#/%E4%BD%BF%E7%94%A8%E8%80%85/post_users_sign_in)


<!-- 解答：
  const signIn = async () => {
    try {
      const response = await axios.post(`${api}/users/sign_in`, {
        email: emailSignIn,
        password: passwordSignIn,
      });
      setToken(response.data.token);
      setResponseMessage('登入成功');
      setIsErrorMessage(false);
    } catch (error) {
      setResponseMessage(`登入失敗: ${error.response?.data?.message || '未知錯誤'}`);
      setIsErrorMessage(true);
    }
  };
-->

| 名字         | 連結                                                                             |
| ------------ | -------------------------------------------------------------------------------- |
| Jin          | [Codepen](https://codepen.io/Jin-L/pen/YPWXeMV)                                  |
| Zem          | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/dPXodgp)                      |
| Tetsu        | [Codepen](https://codepen.io/ttgchang/pen/xbOGYMw?editors=1010)                  |
| 7Red         | [Codepen](https://codepen.io/cch2655/pen/raLVJoX)                                |
| 地瓜         | [Codepen](https://codepen.io/ChippyYU/pen/emzNVeX?editors=0011)                  |
| Eileen       | [Codepen](https://codepen.io/Eileen-io/pen/jErPzyo)                              |
| 老屠         | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/qENEzeK)                  |
| Owen He      | [Codepen](https://codepen.io/owen1120/pen/KwMpoZP?editors=0010)                  |
| 叮咚         | [Codepen](https://codepen.io/pinchieh-lin/pen/LEZVdLL?editors=1010)              |
| Eric         | [Codepen](https://codepen.io/wc-su/pen/pvbJLrz)                                  |
| RyanC        | [Codepen](https://codepen.io/RyanYD/pen/WbxvzKV)                                 |
| RUDY         | [Codepen](https://codepen.io/Rudy-crw/pen/zxBGWLN?editors=0010)                  |
| ZoeKang      | [Codepen](https://codepen.io/byehywmx-the-animator/pen/XJKbqrg)                  |
| Nooooora     | [CodePen](https://codepen.io/Nora-Ch/pen/emzNrJR?editors=1011)                   |
| Melanie      | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/WbxvJwr)                  |
| 平平         | [CodePen](https://codepen.io/ypinpin/pen/JoKdZKQ)                                |
| 舜仁         | [CodePen](https://codepen.io/shunjen/pen/bNedMVN)                                |
| Sherry       | [CodePen](https://codepen.io/twvyqojd-the-typescripter/pen/KwMpeOJ?editors=1010) |
| andy         | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/VYjLBZb?editors=0011)     |
| 社子畢卡索   | [CodePen](https://codepen.io/pen?template=myEJjbq)                               |
| Marco        | [CodePen](https://codepen.io/MarcoChiu/pen/raLVrZM)                              |
| KOMATSU PEI  | [CodePen](https://codepen.io/Komatsu2021/pen/VYjLBqx?editors=1011)               |
| jchunnn      | [CodePen](https://codepen.io/jchunnn/pen/emzNLmv?editors=1011)                   |
| 7lun         | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/NPrqLed?editors=1010)         |
| 小懿         | [CodePen](https://codepen.io/YT-the-vuer/pen/KwMpxVM?editors=1010)               |
| 星雪糖       | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/EayjLde?editors=1010)     |
| kashiwatei   | [CodePen](https://codepen.io/kashiwatei/pen/pvbJxwZ?editors=1011)                |
| cindy        | [Codepen](https://codepen.io/a50134/pen/NPrqOJB?editors=1010)                    |
| Percy        | [Codepen](https://codepen.io/Percy-Ku/pen/KwMpraj?editors=1010)                  |
| cks40660     | [Codepen](https://codepen.io/CKS40660/pen/myEJXzw)                               |
| 主委加碼啦幹 | [Codepen](https://codepen.io/popbob-the-bashful/pen/YPWXRJL?editors=1010)        |
| Mikka        | [Codepen](https://codepen.io/Miikaa/pen/qENdLRy?editors=1010)                    |
| 登登登       | [Codepen](https://codepen.io/Duncanin/pen/EayjOpW?editors=0010)                  |
| Naojun       | [Codepen](https://codepen.io/NAOJUN/pen/LEZVqYK)                                 |
| Jenna        | [Codepen](https://codepen.io/abiscc14/pen/QwEbYyO)                               |
| wind         | [CodePen](https://codepen.io/wind7y/pen/EayjMMm)                                 |
| Chia         | [Codepen](https://codepen.io/Chia-the-encoder/pen/wBWaLOb)                       |
| Vergil       | [CodePen](https://codepen.io/aglgvsie/pen/xbOGjKp)                               |
| JaiMori      | [CodePen](https://codepen.io/jiamori/pen/emzpzEm)                                |
| Rogan        | [CodePen](https://codepen.io/jiamori/pen/emzpzEm)                                |
| An           | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/dPXoQvz)                   |
| Wafa         | [CodePen](https://codepen.io/dqricwgo-the-reactor/pen/gbMaWER?editors=1011)      |
| nonwa_jeff   | [Codepen](https://codepen.io/nonwaaa/pen/LEZpepQ)                                |
| Michelle     | [Codepen](https://codepen.io/bastar_dize/pen/OPXyQWb?editors=1111)               |
| 小趴         | [Codepen](https://codepen.io/papa2415/pen/pvbjOyg)                               |
| kuolun       | [Codepen](https://codepen.io/kuolun/pen/NPrxzMj?editors=0010)                    |
| 蛋白         | [Codepen](https://codepen.io/sjlu-0/pen/Byzjvjv)                                 |
| tanuki       | [Codepen](https://codepen.io/tanuki320/pen/ogLXPWQ?editors=0010)                 |
| 伊迪         | [Codepen](https://codepen.io/sorryFish/pen/zxBoQRK)                              | 
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/GgqmqLe?editors=1010)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/ZYOXvEz?editors=1011)|