example-json-server-auth

CKEditor 編輯器串接圖庫
- 來源感謝 WeiJ 大大：
  - #6
- 申請：
  - https://github.com/WeiJ0/imgurl-token-get

概要

目前使用的檔案

.
├── data/
│   └── db.json    // 資料集合
├── server.js    // json-server

└── public/    // 前端網頁畫面
    ├── index.html    // 首頁
    ├── login.html    // 登入頁
    ├── register.html    // 註冊頁
    ├── me/
    │   └── bookmarks.html    // 使用者收藏列表

    ├── admin/    // 【後台】
    │   ├── desk.html    // 【後台】列表
    │   └── posts/
    │       ├── create.html    // 【後台】新增文章
    │       └── editor.html    // 【後台】編輯文章
    
    └── helpers/
        ├── renderUserMenu.js    // 前台判斷、顯示導覽列
        └── uploadAdpter.js    // 【後台】編輯器串接圖庫

helpers/renderUserMenu.js

index.html、bookmarks.html 共用登入判斷
用瀏覽器資料去 getUser 來確認登入狀態
- 若無法取得就清空瀏覽器
- 代表 token 錯誤或過期了
用回傳的 user.role 字串判斷是否為管理員
- 幫管理員顯示後台連結

index.html

同時取得全部文章、連動收藏列表

- GET

/api/posts?_embed=bookmarks

加入收藏

- POST

/api/bookmarks

const data = {
  postId
};

移除收藏

- DELETE

/api/bookmarks/${bookmarkId}

me/bookmarks.html

只取得使用者自己的收藏列表、該篇文章內容

- GET

const url = `/api/users/${userId}/bookmarks?_expand=post`;

後端路由

【文章系列】：/api/posts
【使用者系列】：/api/users
每筆新增資料會有自己的 id，由套件自行產生數字

不確定能否改用 uuid() 去蓋掉

權限通過後，JSON-Server-auth會自動回傳 accessToken、user.id、user.email 的使用者資料
- 前端需將 accessToken 存入 localStorage
- 並在發送請求前取出來，經由 API 傳給後端

{
  "accessToken": "...",
  "user": {
    "email": "example@mail",
    "id": 2
  }
}

server.js 已增加自訂判斷
- 收到 POST 方法後會將前端傳來的 accessToken 解碼
- 解碼後將 userId 存回資料

預備知識

VSCode
- Live Server
終端機
- 指令
NPM

Started

Step0-1

準備電腦放專案的目錄（Windows 系統盡量都英文），範例路徑：

D:\projects

Step0-2

打開終端機，路徑指向專案目錄
- （Windows 系統可以直接在檔案總管的網址列輸入 CMD）

Step1

抓下來

git clone https://github.com/Aya-X/example-json-server-auth.git

Step2

安裝套件

npm install

Step3

執行

npm run start

Step4

本機端預設網址

http://localhost:3000/

PORT:3000 可以在 server.js 調整
JSON-Server 會自動開啟 <public>/index.html 作為同網域的頁面

分支說明

main

【版本】：已合併 JSON-server、JSON-Server-auth
【初始版本】：commit fefeb0580b
- 由 CodeSandbox 的 JSON-SERVER-STARTER 修改而來
原版網頁移動至 <public>/<example> 底下
- 原版資料集：<data>/sample.json

Package

Mock-Server

nodemon
json-server
json-server-auth
jwt-decode

前端

跳過編譯工具，先全部使用 CDN 匯入

Bootstrap5
- CSS
- JS
axios
CKEditor-v5

Aya-X/example-json-server-auth

example-json-server-auth

PAGES

概要

helpers/renderUserMenu.js

index.html

me/bookmarks.html

後端路由

預備知識

Started

Step0-1

Step0-2

Step1

Step2

Step3

Step4

分支說明

main

Package

Mock-Server

前端