---
# System prepended metadata

title: "\U0001F3C5 Week8 - typescript 實作課程"

---

# 🏅 Week8 - typescript 實作課程

安 大家，這是第八週的任務

以下根據[真真協助統整的進度規劃](https://puffy-spectrum-df9.notion.site/Vue-vue3-TypeScript-a1cb82c769334bcaa231ea614f47a1be) 

大家最最最慢這週需要完成, 如下進度
### 1. 本週預定學習進度
**第五章、BreadCrumb、路由配置(權限)、全屏功能實作、刷新功能實作 (p42~p51)**

### 2. 本週學習重點整理
目前尚未預習完成，目前我個人的進度只到 P47，後續重點整理待有達到時這邊再補上

- 利用路由搭配 el-breadcrumb 設定動態麵包屑
- 確保 vue devtool 能出現正確組件名稱，將組件個別命名的方式
- el-menu 多層重疊時如何確保前綴 icon 的呈現
- 利用 nextTick 實現重新刷新功能 ( 我們以前使用的是 setTimeout 但 nextTick 這寫法更好 )
- 全屏功能的 web api 使用 document.documentElement.requestFullscreen() & document.exitFullscreen()
- 登出再重新登入，會回到登出前的畫面 ( 也就是不會只回到首頁 )
- 在 vue-cli 手寫 middleware 的邏輯
- 切換後台頁面，載入的進度調顯示 ( [nprogress](https://www.npmjs.com/package/nprogress) )
- 在 vue cli src 根元件位置，使用 pinia 的方法
- 路由鑑權 - middleware 設定，避免使用者單純利用變換路由到不該去的頁面
- 路由鑑權 - api 設計 login 只給 token，用戶信息取得則用另一隻 api ( localStorage 只存 token，不該存用戶信息 , 但也可以轉換另一方式讓用戶信息加密後再存到 localStorage )
- 路由鑑權 - 在 middleware 中更改每頁網頁的 title


### 3. 上週未繳交人員公告
再不交真的要公告囉~ 這樣不好喔~ 

<br>

**請大家交個 GitHub 連結作為有達到本週目標 & 挑戰的證明喔~**
( 這是良心繳交區，做為彼此監督彼此學習進度的地方哩~ 沒交的請摸摸你的良心看他會不會痛哩~ )

---
| 名稱 | 回報網址 | 
| -------- | :--------: |
| Bruno     | [github](https://github.com/Bruno-Yu/vue_admin.git)  |
| 真真 | [github](https://github.com/JudithCrocodile/vue_exercise.git) |
| 家欣 | [github](https://github.com/hsin0110/vue_admin_practice)|
|| |

---  