---
tags: 2022 React 新手讀書會
---
# 🏅 Day 19 ｜axios headers token settings
在專案開發上，經常會遇到需要登入才能看到資料的情境，就如同這次的整合任務，也會有登入 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 / 答案 |
|:----------:|:-------------------------------------------------------:|
| Rice#8043 | [CodePen](https://codepen.io/riecball/pen/wvmEvVB?editors=1011) |
| yunyun#5215 |[CodePen](https://codepen.io/yun_yunni/pen/abYxgEj)
| CofCat#9226 | [CodePen](https://codepen.io/cofcat456/pen/rNdbEKd?editors=1011) |
| Eric Su#7798 | [CodePen](https://codepen.io/wc-su/pen/OJvGepJ) |
| Ayre#0016|[CodePen](https://codepen.io/yichunlin09/pen/poLBXQW?editors=0010)|
| Vita Ora#4585|[CodePen](https://codepen.io/showlovezz/pen/dymLBjL?editors=0010)|
| 布魯諾#7239|[CodePen](https://codepen.io/bruno-yu/pen/wvmZLRz?editors=1010)|
| Bumble幫啵#0255|[CodePen](https://codepen.io/pen/qBowzvv)|
| SHIN#6075 |[CodePen](https://codepen.io/shin9626/pen/dymLBEx)|
| LinaChen#1796 |[CodePen](https://codepen.io/LinaChen/pen/ExEJBBO)|
| Timothy#5863 |[CodePen](https://codepen.io/timothy_hippo/pen/rNdbEqv?editors=0010)|
| thereason#9630 |[CodePen](https://codepen.io/esw4soft/pen/poLBXXp)|
|HedgehogKU|[CodePen](https://codepen.io/hedgehogkucc/pen/PoRgMPb?editors=1010)|
| Dylan_Lin#7320 |[CodePen](https://codepen.io/lin-dylan/pen/PoRgraP?editors=1010)|
| 無名#6427 |[CodePen](https://codepen.io/Nomoney/pen/dymLBrB?editors=0010)|
| ChloeLo#4858 |[CodePen](https://codepen.io/chloelo/pen/zYWXgxy)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/xxWevEo) |
|JC#8658|[Codepen](https://codepen.io/jcsamoyed/pen/bGvJXqo)|
|wenyun#2362|[Codepen](https://codepen.io/wenyuncc/pen/WNzWVgy?editors=0010)|
| IceSam#7836 | [Codepen](https://codepen.io/sam-hsu/pen/LYdvwgN) |
| Kimi#2092 | [Codepen](https://codepen.io/a3216lucy/pen/XWEQvyv) |
|彼得#1923|[Codepen](https://codepen.io/shiou-ho/pen/LYdvwqZ)|
|shinyhung#3825|[Codepen](https://codepen.io/sean_1215/pen/yLKWBZe?editors=1011)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/rNdgNam?editors=1010)|
|VadaChen#2055|[CodePen](https://codepen.io/vadachen/pen/gOeJYNE?editors=0010)|
|charlottelee849#0366|[CodePen](https://codepen.io/charlotte-lee/pen/LYdopNr?editors=0010)|
|ㄊwiimax#4564|CodePPwnen[](https://codepen.io/willismax/pen/NWYVPXy)
| Ryder#7398 |[Codepen](https://codepen.io/rider159159/pen/JjLqYRv?editors=1010)|
|Midnightdinner#6220|[Codepen](https://codepen.io/woowooyong/pen/KKoLdva)|
|Stanley#2505|[CodePen](https://codepen.io/bigbearada/pen/BareKxM)|
|Neal#0665|[CodePen](https://codepen.io/neallkf/pen/gOeJMMJ?editors=0011)|
|Evonne#7078|[CodePen](https://codepen.io/Hsu1Fang/pen/LYdobPR?editors=0011)|
|lingxuan|[CodePen](https://codepen.io/lingxuan0618/pen/dymEOov)|
|easton#3863|[Codepen](https://codepen.io/EastonIsCodingNow/pen/GRxaxMb)|
|IreneLee#7932|[Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/LYdogPN?editors=1011)|
|Yanyan#3555|[Codepen](https://codepen.io/wei-yi-lee/pen/oNqRrBy)|
|Anson#3594|[Codepen](https://codepen.io/huanmingchang/pen/vYRqYoo?editors=1010)|
|Kenge#3690|[Codepen](https://codepen.io/pgkusn/pen/abYgzPe)|
| NinaKuo#3332 |[Codepen](https://codepen.io/ninakuo0814/pen/mdxZPVw)|
| yoshidc#0455 |[Codepen](https://codepen.io/yoshiyyc/pen/RwMzRQv)|
| Rocker#6235 |[Codepen](https://codepen.io/RockerLi/pen/bGvPrWg)|
|ねこ*#9385|[Codepen](https://codepen.io/kunpao0104/pen/wvmLqeg)|
|Robert Lo#9653|[Codepen](https://codepen.io/Robert-Lo/pen/ExEBLZe?editors=1010)|
|翔#0859|[Codepen](https://codepen.io/energy95272z/pen/xxWooqr?editors=0010)|
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/abYeopb?editors=1011)|
|aka 南港大食怪|[codepan](https://codepen.io/wei-nie/pen/KKoOvJZ?editors=1011)|
|JasonLu|[codepan](https://codepen.io/wnptocip/pen/oNdvbEJ?editors=1010)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/dyebJdw?editors=1011)|
|Yiling#4054|[Codepen](https://codepen.io/lin010/pen/PoeYRed?editors=1011)|
|TedWang|[Codepen](https://codepen.io/wangtaiyan/pen/rNvBQEM?editors=0010)|
|huch09#1426|[Codepen](https://codepen.io/subarashii-huch09/pen/jOxEEXq?editors=1011)|
|wenyun#2362|[Codepen](https://codepen.io/wenyuncc/pen/jOxPGqW?editors=0011)|