介紹

這是一個可以拿來練習前端 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

網址列輸入 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 是否有效，才會再驗是否可以存取。

框架	推薦文章	相關範例/實作練習	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