github Source code
Angular Interceptor 使用案例二：搭配 Jason Web Token + Session Storage 來實現使用者身份驗證功能 使用者驗證在所有的應用程式中都是很重要的一個環節。本篇筆記中將使用 Angular Interceptor + Jason Web Token 以及 Session Storage 來實現這個重點功能。
本篇這個“前端登入功能”所搭配的後端程式可詳見 “使用 .NET 6.0 進行 JWT 身份驗證的 ASP.NET Web Api”
執行步驟如下：
取得預備的程式碼 建立 appSettings 來存放程式參數值 建立 auth.service.ts 建立 token-storage.service.ts 完成 login page component 中的程式碼 執行測試 建立 interceptor 程式 建立 Guard 程式 取得預備的程式碼 在 “使用 Angular Material 建立一個簡易的 Admin Template II” 已經使用 Material UI Component 設計好登入畫面，接下來就直接捉取這個版本的程式碼來接續完成使用者登入功能的所有程式。...
github Source code
註: 若只要取得本篇筆記所介紹的內容可使用以下指令: “git clone --branch v2.0 https://github.com/calvinegs/Angular_Material_Admin_Template.git”
在本篇筆記中將繼續使用 Angular Material 中的其他 components 來加強 Admin Template。在此文中除了會使用 SnackBar component 來實做一個 Notifier ，同時也把之前介紹過的 Loading Spnner 功能也一併加入。
除此之外也會建置一個 Login Page，身份驗證是一個應用程式中不可缺少的功能，有了這個登入畫面，將會被應用到另一篇 angular Interceptor - JWT 的應用中（待續）。
有關 Admin Template 第一個版本的介紹請見 Loding Spinner
加強 Admin Template 功能 預計實現的功能：
使用 Angular Material SnackBar 為 Admin Template 加入 Notifier 功能。 使用以下步驟：
取得 Admin Template 第一個版本程式碼 實現基本版本 Notifier 實現客制化 Notifier 功能 使用 material 實現一個 Login Page 取得 Admin Template 第一個版本程式碼 首先要為 Admin Template 第一個版本加入 Notifier 功能，可以使用 ｀git clone｀指令取得特定版程式碼。以下指令是取得 Tag為 ver-1....
github Source code
使用 Angular Material 建立一個簡易的 Admin Template Angular 是一個標準的 SPA App framework，今天要記錄的是使用 angular material 來建立一個 SPA App 的範本，除了介紹 Material 相關的功能外，完成的這個簡易型 admin template 剛好可以用來引申後續 angular 筆記範例中的㮒準介面(UI).
想要得到的結果：
檢視環境 在開發環境中必須有 NodeJs
$ node -v v18.12.1 angular cli 則只需安裝在 Local 目錄中即可 ng version
$ ng version Command 'ng' not found, but can be installed with: sudo apt install ng-common 建立 Angular 專案 透過 npm init @angular 語法即可在不必安裝 angular cli 前題下來建立一個 angular project。...
使用 Docker 執行 MongoDb 在之前的筆記中 使用 Node.js + express 建立一個電子商務後端服務的 REST API 已有紀錄了使用 https://cloud.mongodb.com/ 線上的免費服務版本的 MonogoDb，本篇再把 Docker 版的 MongoDb 也一併紀錄下來。把如何使用 docker (docker compose) 來快速設置 MongoDb 及其管理工具 MongoDb Compass 的相關設定過程寫下來。
檢查是否已安裝了 Docker (docker version) $ docker version Client: Docker Engine - Community Version: 20.10.23 API version: 1.41 Go version: go1.18.10 Git commit: 7155243 Built: Thu Jan 19 17:36:25 2023 OS/Arch: linux/amd64 Context: default Experimental: true Server: Docker Engine - Community Engine: Version: 20....
github Source code
除非你和我一樣是個‘老傢伙’，使用過 Angular ver 4.3 以前的版本，否則你一定會遇到它 - interceptor(攔截器)。接下來將用幾篇筆記把各種使用 interceptor 情境的範例給記錄下來。
Angular Interceptor 可以用來作什麼用途呢
修改 HTTP Headers 修改 HTTP request body 設定 authentication/authorization token （身份認證） 模擬 backend api 修改 HTTP response 處理 HTTP 錯誤 (HTTP Error Handlin) 顯示 Loading Spinner 格式化 JSON Responses 日誌記錄 首先先來看看如何使用 Interceptor 來完成一個當你在讀取後端資料時可在畫面上顯示一個“正在讀取中…“的動畫效果，這可以讓使用者有良好的使用體驗。
筆記最後要達的效果是，在按下“取得資料”按鈕時，由程式向後端 API 讀取資料，而在讀取完成前，畫面中的所有 UI (如：按鈕）都是呈現無作用的狀況，直到資料回傳完畢。同時如果“向後端 API 讀取資料”的作業時間小於一秒鐘，則不顯示 “讀取中…" 這個動畫效果。
建立 Angular 專案架構 使用 npm init @angular 語法來建立 Angular project
1 2 3 $ npm init @angular loadingSpin -- --routing --style=scss $ cd loadingSpin $ code ....