Skip to content

Aya-X/example-json-server-auth

Repository files navigation

example-json-server-auth

PAGES


概要

  • 目前使用的檔案
.
├── 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會自動回傳 accessTokenuser.iduser.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-serverJSON-Server-auth

  • 【初始版本】:commit fefeb0580b

    • CodeSandboxJSON-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