Storage, JWT, Cookie, Restful

儲存方式比較

特性/儲存方式	Cookie	Local Storage	Session Storage
定義	伺服器儲存在瀏覽器的 小型資料片段	瀏覽器中的 Web Storage API 的一部分	瀏覽器中的 Web Storage API 的一部分
大小限制	約 4KB	約 5~10 MB	約 5~10 MB
壽命	可設定過期時間	永久儲存 除非手動刪除	瀏覽器會話結束時消失
安全性	可設定 Secure 和 HttpOnly 旗標	相對較低	相對較低
跨域	僅對建立該 Cookie 的域名有效	僅在相同的域名下可用	僅在相同的域名下可用
每次請求附帶	是	否	否
主要用途	會話管理、使用者追蹤	儲存大量資料、使用者偏好	單次瀏覽會話的資料儲存

場景

特性/技術	JWT	Cookie	後端 Session
優點	無狀態、跨域、靈活性、前後端分離	簡單、廣泛支持、伺服器端控制	安全性高、易於撤銷和管理
缺點	需要安全儲存、不易撤銷、較大大小	大小限制、跨域問題	擴展性差、負載平衡需特別處理
主要適用場景	跨域、前後端分離、狀態無關的設計	單一系統、需要高安全性	單一系統、需要高安全性和狀態管理

什麼是 RESTful API

網路應用程式介面的設計風格，它遵循 REST（Representational State Transfer，具象狀態傳輸）原則：這是一種軟體架構風格，用於設計網路應用程式的互動方式，建構網路應用的設計原則和約束條件

主要特點

按需求提供程式碼 Code on Demand

• 客戶端-伺服器（Client-Server）架構

• 無狀態，狀態無保存（Stateless）

  • 因為每次都重新驗證用戶憑證，每個請求從客戶端到伺服器都必須包含所有必要資訊，每個請求都是獨立的，伺服器不儲存任何有關客戶端的狀態。

• 層次化系統（Layered System）：

  • 允許在客戶端和伺服器之間增加層（如：代理、快取等）

• 資源識別：使用 URL 路徑來標示資源

  • 通過 HTTP 方法進行資源操作

    • 常用的 HTTP 動詞：

      • GET：讀取資源 (READ, R)
      • POST：創建新資源(CREATE, C)
      • PUT：更新現有資源 (UPDATE, U)
      • DELETE：刪除資源 (DELETE, D)

• 支持多種資料格式，通常是 JSON 或 XML

  • 簡單、可擴展

• 可快取（Cacheable）：響應可以被明確地標記為可快取或不可快取。

• 統一介面（Uniform Interface）：RESTful API 應具備一致和簡單的介面。

是 RESTful 嗎 ?

• HTTP 方法和路由：

根據您的程式碼，API 使用 PUT 方法進行登入操作。

一般來說，登入操作更傾向於使用 POST 方法，因為它涉及到狀態變更。

• 狀態無保存：看起來這個 API 是狀態無保存的。

• 路由（例如 /api/user/auth）應該是名詞

前端 Cookie

設定 Cookie

document.cookie = "username=John; expires=Wed, 1 Jan 2025 00:00:00 UTC; path=/";

讀取 Cookie

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    const [cookieName, cookieValue] = cookies[i].split("=");
    if (cookieName === name) {
      return cookieValue;
    }
  }
  return null;
}

刪除 Cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Node.js（使用 Express）

設定 Cookie

const express = require('express');
const app = express();

app.get('/set-cookie', (req, res) => {
  res.cookie('username', 'John', { expires: new Date(Date.now() + 86400000), httpOnly: true });
  res.send('Cookie has been set');
});

讀取 Cookie

app.get('/read-cookie', (req, res) => {
  const username = req.cookies.username;
  res.send(`Username is ${username}`);
});

刪除 Cookie

app.get('/delete-cookie', (req, res) => {
  res.clearCookie('username');
  res.send('Cookie has been deleted');
});

Python（使用 Flask）

設定 Cookie

from flask import Flask, make_response

app = Flask(__name__)

@app.route('/set-cookie')
def set_cookie():
    resp = make_response('Setting cookie!')
    resp.set_cookie('username', 'John')
    return resp

讀取 Cookie

from flask import Flask, request

@app.route('/read-cookie')
def read_cookie():
    username = request.cookies.get('username')
    return f'Username is {username}'

刪除 Cookie

@app.route('/delete-cookie')
def delete_cookie():
    resp = make_response('Deleting cookie!')
    resp.set_cookie('username', '', expires=0)
    return resp