--- tags: Vue 直播班 - 2021 夏季班 --- # 檢核點 - 第二週 **重點觀念：** 1. 這週開始串接後台 API 1. Vue 指令 **回覆參考：** ``` 對於 Vue 的掌握度相當不錯，串接 API 也沒有問題，恭喜過關 可以開始規劃更豐富的產品列表內容喔 ``` **如何測試同學作業？** ``` 請各位用自己的帳密登入，並且建立一個新的產品來測試 不要更動學生原本的產品資料 ``` **注意：** ``` codepen 提交會無法儲存 token，如果是這樣的話請同學 lv2 以上：將本地端可運行的 code 上傳到 Codepen，請助教拉下來測試 lv1：使用免驗證 api，就不需要儲存 token ``` --- **後台登入頁面：** * 登入的 label for 需對應 * input id 帳號的 input type 應為 email，密碼應為 password * 有將 token 存入 Cookie 內 助教新增建議： * axios 記得寫上 catch * **有遇到串接到前台產品列表的同學， 可以注意一下** * 以下程式碼可以嘗試用解構的方式來簡化： ```htmlembedded= const token = res.data.token; const expired = res.data.expired; ``` **後台產品頁面：** - 正確使用 Vue 指令 - 串接後台 GET 產品 API - 有讀取 Cookie 拿到 token 並賦予在 headers 上 - 測試功能正常，有錯誤再細看程式碼 - 此作業建議還是用自己新增的資料，避免直接使用測試 API 的內容 - `axios.defaults.headers.common.Authorization = token;` 可以在初始化的函式內寫 ``` 驗證出現錯誤排除方式: - 查看帳號密碼是否錯誤 - axios 是否在 headers 有帶上 token ``` 助教新增建議： *