這篇主要是說明如何從React登入機制和串接，範例程式碼可參考這裡。
上一篇已實作了API權限的驗證和派發機制，現在要說明如何從React去呼叫登入的API
開始前先說明一下要實現的React登入架構：
(1)登入後取得的登入資訊(含Token)會放入client端的LocalStorage(如果不跨網頁可存在SessionStorage)
(2)使用React.UseContext方式讓全系統都可使用登入資訊。
(3)需要驗證的API都須在Header加上Authorization: Bearer {TOKEN}。
首先先修改setupProxy.js，改成只要/api開頭的請求都會用代理伺服器轉到真正API的位置。
setupProxy.js
------------------------------------------------------
const context = [
"/api",
];
------------------------------------------------------
------------------------------------------------------
const context = [
"/api",
];
------------------------------------------------------
再來clientapp內需要新增或修改幾個檔案，列在下方(因程式碼太多，附上Github的檔案連結)
=呼叫API的方法定義成共用的Service。
=登入相關的一些方法，例如登入、登出和驗證...等等。
=登入機制用的Context，相關登入的驗證都會在這裡。
/models/_common/basicHttp.d.ts
=共用的傳輸模板結構。
=React Hook的properties結構
=使用者登入資訊結構
=登入API的資料結構
=登入頁(使用mui的免費template去修改的)
=改成會去呼叫WeatherForecast.Get去取得資料後，顯示在畫面上。
API部分也要新增或修改一些結構
/Models/Common/BasicHttpViewModel.cs
=共用的傳輸模板結構。
=登入API的資料結構
/Controllers/LoginController.cs
=針對signin的方法做一些調整。
/Controllers/WeatherForecastController.cs
=針對原本範例的Get作一些包裝，例如用BasicResponse包住。
照上面的步驟做完後，就可以F5試試看，畫面會如同下方圖片。
 |
| 登入頁(帳密非空白就可登入) |
 |
| 登入後就可以用F12去查看Application/localstorage內是否儲存key="User" |
p.s.目前範例專案沒有登出功能，如果要強制登出可以手動刪除localstorage的資料在重新整理即可跳回登入頁。
以上就完成了登入功能了，可以前往About頁面抓資料(需要驗證)，看起來是有成功抓到資料!
 |
| 通過API的Token驗證! |
這樣就完成一個有登入驗證機制的網頁了!
但其實還是有很多尚未實作的部分，例如連接資料庫、登出或菜單頁的功能...等等。
也是等未來有實作後再分享給大家。
沒有留言:
張貼留言