# [Udemy - React] 課程流程筆記（sec. 21 - Adding Authentication）

###### tags: `Udemy 課程筆記` `React` `前端筆記`

## 311. How Authentication Works

基礎用戶驗證大概有兩種：

1. Server-side Sessions

- 用戶身份驗證後 server 會存一筆獨一無二的 identifier
- 該 identifier 會回傳給 client
- client 發送請求時帶 identifier，讓 server 明白發請求的是誰

2. Authentication Tokens
- 用戶驗證身份後，server 會傳 client 一筆「代表有許可權的 token」，但是後端並==不會存這筆 token==
- client 發送請求時帶這筆 token，讓 server 明白發請求的是誰


課程範例是使用 **2. Authentication Tokens**，並且經過身份驗證後（登入）取得 token，透過 request `headers: { 'Authorization': 'Bearer' + token }` 告知 server 誰發的請求。

## 313. Working with Query Parameters

除了用 code 決定 `queries` 還可以透過 `<Link />` 處理 `quries` 的設定：

> 但是 routing 的資料表就要注意，因為 `<Link />` 是放在 template 的，所以 template 的路由資訊是吃設定表的。

// useSearchParams()

// ...
const [searchParams, setSearchParams] = useSearchParams()

const handleClick = () => {
  // 丟物件
  setSearchParams({ type: 'login' })
  
  // 也可以用 new URLSearchParams()，更加語義化
  const quries = new URLSearchParams()
  quries.set('type', 'login')
  setSearchParams(quries)
}
// ...

// 使用 <Link />

// ...
<Link to={'?type=login'}>test</Link>
// ...

## 316. Adding User Login

因為目前工作上還未使用 v6 的 `Form, action` 等相關 API，因此我使用一般觸發 `onSubmit` 的方式改寫：