這是一個可以拿來練習前端 jwt refresh token 的後端專案。
$ git clone https://github.com/JiaHongL/jwt-refresh-token-mock-backend.git
$ cd jwt-refresh-token-mock-backend
$ npm install
$ npm run start:dev| 框架 | 推薦文章 | 相關範例/實作練習 | demo |
|---|---|---|---|
| Angular | Angular 12 Refresh Token with Interceptor and JWT example | JiaHongL/ng-refresh-token-demo | Demo |
| React + Redux Toolkit | React.js + Redux Toolkit: Refresh Tokens Authentication | JiaHongL/react-refresh-token-demo | Demo |
| Vue + Axios | ChatGPT 範例 | JiaHongL/vue-refresh-token-demo | Demo |
歡迎實作其他版本，可發 PR 或是 issue 都可:")
-
網址列輸入 http://localhost:3000/api ，即可看到 API 文件。
-
鎖頭的意思。
-
展開其中一支 API，上半部為測試 API，下半部則是相關 http status code 代表的意思 與 response 的格式 (也可點擊 schema 看格式)。
-
按下 [Tru it out]，再按下 [Execute]，就可以測試API，底部也會顯示回應結果。
-
複製回傳的 accessToken，點擊右上角的 [Authorize]，貼上 Token。
-
即可完成登入(token設定)。
-
可去嘗試其他有 accessToken 保護的 API。
-
另外要特別注意，前端實作時，要記得加上 Bearer ${token} (Bearer後有空格!!)。
-
如果手腳太慢或是超過5秒，則會收到 401 error，就是沒有權限存取的 API。
-
如果想調整 accessToken 過期時間，可到 src/auth/auth.service.ts，調整上面有寫註解的變數即可(參數)，如下圖調整為60秒過期。
-
若想測試 403，可以再重新登入，趁 accessToken 還未過期時，打刪除帳號API，然後再立即去打其他受保護的API，即可收到 403 error。
PS：401 與 403 的區別，401 : 沒有權限存取，403 : 拒絕任何存取，而這專案的 API 會先驗 token 是否有效，才會再驗是否可以存取。
