在專案開發上，經常會遇到需要登入才能看到資料的情境，就如同這次的整合任務，也會有登入 API 並取得這位使用者的待辦清單。因此需要了解當我們登入之後，要如何將 token 設定上去，方便取用需驗證才能拿到的資料。

token 是要在 headers 中加入 `Authorization`，舉例：

axios.get('API_URL', {
  headers: {
    'Authorization': `token ${access_token}`
  }
})
.then((res) => {
  console.log(res.data)
})
.catch((error) => {
  console.error(error)
})

上面這段程式碼，直接在 API 中加上 headers 設定，並將 token 帶上，但我們經常在登入會有許多 API 都用到 token 設置，因此也可以在登入後加上：

axios.defaults.headers.common['Authorization'] = `token ${access_token}`;

這樣就可以為所有的 API 帶上 Authorization Token 囉！

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/Yzajdpo?editors=1010)，並試著完成 token 設定，在點擊『取得資料』按鈕時，顯示『資料取得成功』。

API: `https://livejs-api.hexschool.io/api/livejs/v1/admin/react-practice/orders`
token: `rqqWQlTafiYotxQ8x3dy3BGt0ES2`

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

<!-- 解答：

解答一：
axios.get('https://livejs-api.hexschool.io/api/livejs/v1/admin/react-practice/orders',
{
  headers: {
    'Authorization': 'rqqWQlTafiYotxQ8x3dy3BGt0ES2'
  }
})
.then(function (response) {
  alert('資料取得成功')
})
.catch(function (err) {
  alert('資料取得失敗')
})

解答二：
axios.defaults.headers.common['Authorization'] = `rqqWQlTafiYotxQ8x3dy3BGt0ES2`;
axios.get('https://livejs-api.hexschool.io/api/livejs/v1/admin/react-practice/orders')
.then(function (response) {
  alert('資料取得成功')
})
.catch(function (err) {
  alert('資料取得失敗')
})

-->

回報區
---

| # | Discord | CodePen / 答案 |
|:-:|:-------:|:---------------------------------------------------------------:|
| 01 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/wvRGZdm) |
| 02 | Wendy3 | [Codepen](https://codepen.io/wendy03/pen/LYMNvBb) |
| 03 | shcopy | [Codepen](https://codepen.io/shcopy/pen/poqyBQm) |
| 04 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/zYyqXMv) |
| 05 | Kaya | [Codepen](https://codepen.io/laron9486/pen/LYMNvMW) |
| 06 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/NWeNmZo) |
| 07 | 景泰 | [Codepen](https://codepen.io/aria198a/pen/MWZydpy?editors=1011) |
| 08 | cataska | [Codepen](https://codepen.io/lovecankill/pen/vYvGwKj) |
| 09 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/wvRGZOY) |
| 10 | 金魚 | [Codepen](https://codepen.io/cso-goldfish/pen/eYbZaVg) |
| 11 | Aden | [Codepen](https://codepen.io/Osases/pen/GRPZbZR) |
| 12 |jasperlu005| [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/xxmVoQe?editors=1010)|
| 13 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/oNJxKaZ) |
| 14 | Yen |[Codepen](https://codepen.io/TZU-HUANG-YEN/pen/jOXrNrN?editors=0011)|
| 15 | yuchih | [Codepen](https://codepen.io/hijachu/pen/OJrNGpz)
| 16 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/poqboOa) |
| 17 | Billy.Ji |[Codepen](https://codepen.io/yaj55ushydna/pen/xxmObwK)|
| 18 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/KKbMpPj) |
| 19 | Iris | [codePen](https://codepen.io/iris831206/pen/wvRWMWP?editors=1010) |
| 20 | rainnping |[Codepen](https://codepen.io/rainnping/pen/RwERrJZ)|
| 21 | 鉛筆 |[Codepen](https://codepen.io/zoeguava/pen/OJrXNgd?editors=0011)|
| 22 | 喃喃 |[Codepen](https://codepen.io/VeLario/pen/rNoLePw?editors=0010)|
| 23 | Ataraxia |[Codepen](https://codepen.io/ataraxia8888/pen/xxmOOKj)|
| 24 | curry |[Codepen](https://codepen.io/Ted19851223/pen/PoXzjpq?editors=1010)|
| 25 |David0799 |[Codepen](https://codepen.io/David0799/pen/abPZwpj)|
| 26 | smalljie |[Codepen](https://codepen.io/smalljie/pen/vYvKWGM)|
| 27 | 精靈 |[Codepen](https://codepen.io/vesbexih-the-bashful/pen/oNJLpZj?editors=1010)|
| 28 | 地球儀 |[Codepen](https://codepen.io/dayday1222/pen/vYvKdda)|
| 29 | collinkao | [CodePen](https://codepen.io/collin0825/pen/JjwKZwM?editors=0010)
| 30 | 小明#4408 | [CodePen](https://codepen.io/ujlylmbv-the-lessful/pen/xxmOMNp)
| 31 | PoWei#8484 |[Codepen](https://codepen.io/harrison-wei-lai/pen/PoXGRwg?editors=0001)|
| 32 | Ingrid |[Codepen](https://codepen.io/ingrid-chi/pen/ExGgrpg?editors=0011)|
| 33 | PollyPO_Lee |[Codepen](https://codepen.io/pollypo1986/pen/mdaXpOJ)|
| 34 | Cami |[Codepen](https://codepen.io/fayevivi/pen/JjwLVNa?editors=1010)|

* 快速複製

|  |  |[Codepen]()|