React-[串接api篇]-登入與驗證功能發送post ajax call

以下主要以六角學院的React入門工作坊的串接API為主，為了更加熟悉串接流程，仔細把開發流程分析出來，本次串接以axios套件為主並使用async 跟await函式寫法

TodoList 串接API

登入功能

開發流程：

1.製作版面(三大欄位)：

input:email 要注意的是label[htmlFor]與input[id]的對應
input:password
button:button
登入後，要注意伺服器回傳的資料裡面會有一個token的屬性，會需要把這個token存取起來
提醒！input的name屬性和後端傳遞的資料欄位息息相關，在此建議和api提供的欄位同值會比較好

2.稍微了解API註冊功能，伺服器所需要網路請求json檔案中->欄位

注意會有一個token屬性！！

3.邏輯流程：

前置作業

• 3-0.登入功能是post請求(如上圖所知)
• 3-1.先準備好api的主要網址(https://todolist-api.hexschool.io)，以及註冊功能的api("/users/sign_in")

    const base_url = "https://todolist-api.hexschool.io/";
    const signUp_api = `${base_url}/users/sign_in`;
  

input:email欄位

• 3-2.狀態設置：
  • 在這次登入表單中，有二個欄位必填，input:email & input:password
  • 因此可以將這二個欄位做成一個物件，並統一放在一個狀態state中做管理

    const [signInData, setSignInData] = useState({
      email: '',
      password: '',
    })
    

• 前面有提到，登入成功，伺服器會回傳資料，裡面夾帶token，會需要這個值，所以需要設定關於token的狀態來存取，因為這個token其他元件也會使用，所以寫在App裡，在作為prop傳入到SignIn元件中
  const [token , setToken]=useState('')

• 3-3.設定onChange事件->設計callback fn

  • 當使用者寫入欄位的值，觸發onChange事件並調用callback fn
  • 這個callback fn就是來將使用者寫入在欄位的值存入到useState的狀態中（寫入方法：setSignInData）
  • 設計這個callback fn

    const handleInputValue = (e) => {
      setSignInData({
          ...signInData,//將原始寫入的值帶入
          [e.target.name]: e.target.value //更新
      })
    }
    

• 3-4.設定input[value]屬性：將使用者寫入input的值並利用useState的寫入方法寫入到各欄位狀態中，再將該狀態寫回到input[value]屬性值裡
  

點擊送出登入資料

• 3-5.使用者點擊送出登入按鈕後

  • 在button上，設置onClick事件調用handleSignInClick callback fn

• 3-6.設計handleSignInClick 函式流程（先試看看是否登入成功並回傳資料）：
  
  
  

寫成async非同步函式，正式輸入已註冊過的使用者帳號 密碼 伺服器回傳成功的回覆:重要的是裡面的data物件內容

將token取出來並存在document.cookie瀏覽器的cookie中

程式碼解釋chatgpt:
這段程式碼看起來是從res.data中取得一個名為token的值，然後將這個token儲存到瀏覽器的 Cookie 中，並設定 Cookie 的過期時間為明天。讓我逐步解釋這段程式碼的功能：

const { token } = res.data;
這一行程式碼使用解構賦值從res.data物件中提取名為token的屬性。這假設res.data是一個回應物件，其中包含一些資料，而token是其中一個屬性。

const tomorrow = new Date();
這一行程式碼建立了一個表示目前日期和時間的Date物件，然後將其儲存在變數tomorrow中。

tomorrow.setDate(tomorrow.getDate() + 1);
這一行程式碼透過tomorrow.getDate() + 1來計算明天的日期，並將其設定為tomorrow物件的日期部分。這樣，tomorrow將代表明天的日期。

document.cookie = token=${token};expires=${tomorrow.toUTCString()};
這一行程式碼將一個名為token的 Cookie 設定到瀏覽器中。它使用token變數的值作為 Cookie 的內容，並使用tomorrow.toUTCString()來設定 Cookie 的過期時間為明天。這樣，該 Cookie 將在明天過期，瀏覽器會自動移除它。

總之，這段程式碼的目的是將從res.data中取得的token儲存到瀏覽器的 Cookie 中，並設定 Cookie 的過期時間為明天，這樣在明天過期後，瀏覽器會自動刪除該 Cookie。通常，這樣的操作用於在瀏覽器中保存身份驗證令牌或其他敏感資訊，以便稍後在應用程式的請求中使用。

得到伺服器回傳的登入狀態回覆

• 3-7.將handleSignIn async函式寫的更完整一點
  • 狀態設置：點擊註冊後，顯示提示訊息，需要有一個狀態const [msg, setMsg] = useState('')
  • 再將這個setMsg方法寫入在上面使用者點擊按鈕後，將註冊內容送出後，我想顯示伺服器回傳資料的相關訊息提供給使用者，好明白當前狀態是註冊成功還是失敗
    完整程式碼：
    

登入功能串接api完成！！

補充：

瀏覽器的 Cookie 是一種用於在網站和瀏覽器之間儲存少量資訊的機制。它們是存儲在使用者瀏覽器中的小文本檔案，用於跟踪、記錄和識別用戶以及提供個人化的網站體驗。Cookie 可以用於多種用途，包括以下幾點：

身份驗證和會話管理： 網站可以使用 Cookie 來記住用戶的登錄狀態，以便在同一瀏覽器會話中保持用戶的登錄狀態。這對於在網站瀏覽期間無需多次登錄非常有用。

個人化和記憶用戶設定： 網站可以使用 Cookie 來記住用戶的偏好和設定，從而提供更個人化的用戶體驗。例如，語言偏好、主題選擇等。

購物車和電子商務： 在電子商務網站上，Cookie 可以用於記錄用戶的購物車內容，以便在不同頁面之間保持連接，並在用戶下次訪問時保留購物車內容。

行為追蹤和分析： 網站可以使用 Cookie 來追蹤用戶的行為，例如瀏覽歷史、點擊和互動，以進行分析並改進網站性能。

廣告定向： 廣告公司和網站可以使用 Cookie 來追蹤用戶的瀏覽行為，從而提供相關的廣告內容。

安全性： Cookie 可以用於實施安全性措施，例如防止跨站請求偽造（CSRF）攻擊。

總之，瀏覽器的 Cookie 是網站用於在用戶瀏覽器中存儲和檢索小量資訊的一種機制，以實現身份驗證、個人化、購物車管理、行為分析等功能。但需要注意的是，由於 Cookie 是在用戶端儲存的，因此敏感信息的安全性需要得到適當的考慮和管理。