---
# System prepended metadata

title: "\U0001F3C5Day17 - todolist 實作篇：註冊登入功能"
tags: [2024 Vue 前端新手營 - Composition API]

---

# 🏅Day17 - todolist 實作篇：註冊登入功能

## 註冊功能

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

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

可以參考下面的範例：

<iframe height="300" style="width: 100%;" scrolling="no" title="todolist 實作篇：註冊登入功能 - 範例(1)" src="https://codepen.io/yen-kg/embed/abgzmKE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yen-kg/pen/abgzmKE">
  todolist 實作篇：註冊登入功能 - 範例(1)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/ExBaeyZ)，執行以下要求（只能操作 script 的部分）：

* 請完成登入的功能，並且將成功 or 失敗的訊息顯示在畫面上。
* 若登入成功後，請務必將後端回傳的 token 值給存起來。( 賦予到 token 這個變數上 )


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
const signIn = async () => {
  try {
    const response = await axios.post(`${api}/users/sign_in`, {
      email: emailSignIn.value,
      password: passwordSignIn.value,
    });
    responseMessage.value = '登入成功';
    token.value = response.data.token;
    isErrorMessage.value = false;
  } catch (error) {
    responseMessage.value = '登入失敗: ' + error.response.data.message;
    isErrorMessage.value = true;
  }
};
-->

回報區
---

|     Discord      |                           CodePen / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
| Michael |[CodePen](https://codepen.io/RenHuang-Huang/pen/BagVEdG) |
| mu mu |[CodePen](https://codepen.io/ishuki916/pen/QWXQzmd) |
| anderson666 |[CodePen](https://codepen.io/goodmanbuild/pen/xxoYmJy) |
| Aden |[CodePen](https://codepen.io/Osases/pen/WNqMLPj) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/NWZyepx) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/MWMQZxQ) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/KKjQYGq) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/mdZxbPP) |
| KK | [CodePen](https://reurl.cc/pvM2KQ) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/abgYbZN) |
|好了啦|[CodePen](https://codepen.io/j-z-the-flexboxer/pen/gONeOKB)|
| 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/ZEdxYmv)
| dodo | [CodePen](https://codepen.io/MissDouble/pen/ExBENwJ) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/bGPvNPg) |
| Shin | [CodePen](https://codepen.io/shin9626/pen/MWMVpZO) |
| zaoannihao | [CodePen](https://codepen.io/ckhwdvrx-the-solid/pen/PorRKBw) |
| 末次 | [CodePen](https://codepen.io/yunjulee/pen/LYKdxaO) |
| Renee | [CodePen](https://codepen.io/renee_wu/pen/xxoWpZP) |
| Barry1104 | [CodePen](https://codepen.io/barry1104/pen/MWMVPJG) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/JjQZKEj)|
| World |[Codepen](https://codepen.io/HexschoolVuePujols/pen/GRbGzrb)|
| Mars |[Codepen](https://codepen.io/MarsKuo/pen/qBzyozO)|
| Zhen |[Codepen](https://codepen.io/yunnnz/pen/BagPvMv)|
| anthy7154 |[Codepen](https://codepen.io/hnhmgzbw-the-sans/pen/oNrPdxb)|
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/jOjevve) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/BagvLqZ)|
| Ching | [CodePen](https://codepen.io/huangching/pen/BagMRWw) |
| Eden |[Codepen](https://codepen.io/iseden/pen/zYgNJEb)|
| Triple | [CodePen](https://codepen.io/riku30/pen/ZEgprMK) |
<!-- 

 | user | [CodePen]() |

-->