[week 22] React：用 SPA 架構實作一個部落格（二）- 身分驗證

本篇為 [FE302] React 基礎 - hooks 版本這門課程的學習筆記。如有錯誤歡迎指正！

參考文章：淺談新手在學習 SPA 時的常見問題：以 Router 為例

如何進行身分驗證？

在實作登入功能之前，必須先瞭解下列兩種進行身分驗證的方法有何不同：

透過 Cookie 驗證，取得 Session ID
把 Session ID 存在瀏覽器的 LocalStorage 裡

與本篇要實作的 SPA 不同，過去我們通常是利用 Cookie 來驗證使用者登入狀態，流程大致如下：

使用者在登入時會打一個 API 給 Server，Server 確認沒問題之後，會回傳包含 Set-Cookie 的 HTTP Response Header
當使用者需要進行身分驗證時，會打一個 GET/me 的 API 給 Server，瀏覽器會自動帶入 Cookie，假如 Session ID 是正確的，Server 就會回傳 data，反之則回傳錯誤

把 Session ID 存在 LocalStorage

但是到了 SPA 之後，我們就比較少用 Cookie 來進行驗證，而是把 Session ID 存在瀏覽器的 LocalStorage 裡，每次發 Resquest 時會自動帶入資料，流程如下：

使用者在登入後，Server 會回傳一個 JSON Web Token（一種固定格式的資料），並且儲存在瀏覽器的 LocalStorage 裡
當需要進行身分驗證時，就會自動在 header 帶上這個 JWT 給 Serever，確認沒問題後回傳 data

打一個 POST API 到 Server

我們可以試著透過 Postman 打 POST API 到 Server 測試：

POST/
https://student-json-api.lidemy.me/login

Body
{"username":"user01", "password":"Lidemy"}

若 username 和 password 驗證沒問題，Server 就會回傳一個以 base64 編碼的 JWT token：

{
    "ok": 1,
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InVzZXIwMSIsInVzZXJJZCI6MSwiaWF0IjoxNjA3NzQzMTA5fQ.FgTlsa57WOYNZEBj5HtL74uIVDuKFWErrmQ72qXuHmo"
}

結果如下：

把這段 JWT token 拿到 jwt 官網進行解析，可以轉換成 JSON 格式，因此不建議儲存一些敏感資訊（例如密碼、地址等）在 token：

透過 token 取得使用者資訊

接下來我們打一個 GET API 到 Server，並帶上剛才的 token，Server 就會回傳使用者資訊：

GET/
https://student-json-api.lidemy.me/me

Bearer Token
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InVzZXIwMSIsInVzZXJJZCI6MSwiaWF0IjoxNjA3NzQzMTA5fQ.FgTlsa57WOYNZEBj5HtL74uIVDuKFWErrmQ72qXuHmo

結果如下：

學會如何透過打 API 拿到 token 進行身分驗證後，再來我們要實際應用在部落格的登入機制，那麼開始吧！

實作：登入功能

1. 設定串接 API 的方法：登入 & 身分驗證

同樣參考 API 文件說明，在 WebAPI.js 新增 login 和 getMe 兩個 API：

// 登入
export const login = (username, password) => {
  return fetch(`${BASE_URL}/login`, {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify({
      username,
      password,
    }),
  }).then((res) => res.json());
};

// 身分驗證
export const getMe = () => {
  // 從 localStorage 拿取 token
  const token = localStorage.getItem("token");
  return fetch(`${BASE_URL}/me`, {
    headers: {
      authorization: `Bearer ${token}`,
    },
  })
    .then((res) => res.json())
};

2. 實作 LoginPage.js

可透過 onSubmit 與 onChange 事件機制，拿到 input.value 的值。

在 React 中，value 若為空值（undefined），等同於沒有傳 value，所以這裡初始值要參數設為空字串，也就是 useState("")：

export default function LoginPage() {
  // 在 React 中 value 若是 undefined，等同於沒有傳 value
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  // 阻止送出表單
  const handleSubmit = (e) => {
    e.preventDefault();
    // 確認是否有抓到 username
    alert(username);
  };

  const handleUsername = (e) => {
    setUsername(e.target.value);
  };

  const handlePassword = (e) => {
    setPassword(e.target.value);
  };
  return (
    <Root>
      <LoginForm onSubmit={handleSubmit}>
        <LoginTitle>登入</LoginTitle>
        <LoginInput>
          username: <input value={username} onChange={handleUsername} />
        </LoginInput>
        <LoginInput>
          password:
          <input type="password" value={password} onChange={handlePassword} />
        </LoginInput>
        <LoginSubmit>
          <button>登入</button>
        </LoginSubmit>
      </LoginForm>
    </Root>
  );
}

結果如下，按下 button 成功拿取 input.value：

3. 建立 utils.js 管理常用功能

在拿取 token 時，其實可以再進行優化，例如把 token 相關的程式碼獨立到 utils.js 管理，即可避免打錯字：

const TOKEN_NAME = "token";

// 將 token 存到 localStorage
export const setAuthToken = (token) => {
  localStorage.setItem(TOKEN_NAME, token);
};

// 從 localStorage 讀取 token
export const getAuthToken = () => {
  return localStorage.getItem(TOKEN_NAME);
};

WebAPI.js：引入使用 getAuthToken()，從 localStorage 讀取 token 的值：

import { getAuthToken } from "./utils";

// 身分驗證
export const getMe = () => {
  // 從 localStorage 讀取 token
  const token = getAuthToken();
  return fetch(`${BASE_URL}/me`, {
    headers: {
      authorization: `Bearer ${token}`,
    },
  })
    .then((res) => res.json())
};

LoginPage.js：使用 setAuthToken() 儲存 token：

import { login } from "../../WebAPI";
import { setAuthToken } from "./utils";

export default function LoginPage() {
  // 在 React 中 value 若是 undefined，等同於沒有傳 value
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState();

  // 阻止送出表單
  const handleSubmit = (e) => {
    e.preventDefault();
    login(username, password).then((data) => {
      // 若 ok 為 0 代表錯誤
      if (data.ok === 0) {
        return setErrorMessage(data.message);
      }
      // 成功的話就把 token 存到 localStorage
      setAuthToken(data.token);
    });
  };
  
  // ...

確認是否有成功透過 localStorage 存取 token：

useHistory：跳轉頁面

登入成功之後，接著要把使用者導回首頁，可透過 react-router 提供的 Hooks：useHistory 來主動跳轉路由。

引入套件：

import { useHistory } from "react-router-dom";

將程式碼修改如下，即可在登入後跳轉至首頁：

const history = useHistory();

const handleSubmit = (e) => {
  e.preventDefault();
  login(username, password).then((data) => {
    if (data.ok === 0) {
      return setErrorMessage(data.message);
    }
    // 成功的話就把 token 存到 localStorage
    setAuthToken(data.token);
    // 並導回首頁
    history.push("/");
  });
};

實作：身分驗證

在完成登入功能後，在以 getMe() 拿到使用者資訊之前都還不算登入成功，我們還需要保持登入狀態，也就是把使用者資料透過 Context 存到全域環境中，才能傳給底下的每個 Component 使用。

1. createContext：傳入預設值

contexts.js

為了讓其他 Component 也能讀取 user 資料，可在 src 目錄底下建立一個 contexts.js，即可透過 AuthContext() 來取值：

import { createContext } from "React";

// 初始值為 null
export const AuthContext = createContext(null);

App.js

把登入狀態存在 Component 的最頂端，只要在 App.js 存 user 狀態，即可透過有無 user 判斷是否登入：

export default function App() {
  // user 有東西就代表有登入
  const [user, setUser] = useState(null);
  
  //...

2. Context Provider：提供子層 value

App.js

用 Context Provider 包住整個組件，並設定 value，這裡可傳入物件型態的參數，把 {user, setUser} 傳給子層：

import AuthContext from "../../contexts";
// ...
  return (
    <AuthContext.Provider value={{user, setUser}}>
      <Root>
       // 路由配置 ...        
      </Root>
    </AuthContext.Provider>
  );
}

LoginPage.js

引入 AuthContext 取得 user 資訊，用 setUser 儲存狀態，並以 getMe 發出 resquest 進行身分驗證：

import { AuthContext } from "../../contexts";

export default function LoginPage() {
  const { setUser } = useContext(AuthContext);
  
// ...

  const handleSubmit = (e) => {
    e.preventDefault();
    login(username, password).then((data) => {
      if (data.ok === 0) {
        return setErrorMessage(data.message);
      }
      setAuthToken(data.token);
      getMe().then((response) => {
        if (data.ok !== 1) {
          // 在 getMe() 出錯代表還沒成功登入，因此要把 token 清空
          setAuthToken(null);
          setErrorMessage(response.toString());
        }
        setUser(response.data);
        // 並導回首頁
        history.push("/");

Header.js

接著就可以根據登入狀態，判斷導覽列是否顯示「登入、註冊」或是「發布文章、登出」。

注意這裡的判斷式裡面，只能包含一個 JSX 標籤，否則會出錯，例如 {user && <Link>...</Link>}：

export default function Header() {
  const location = useLocation();
  const { user, setUser } = useContext(AuthContext);
  const history = useHistory();

  const handleLogout = () => {
    setAuthToken("");
    setUser(null);
    if (location.pathname !== "/") {
      history.push("/");
    }
  };

  return (
    <HeaderContainer>
      <Brand>
        {/* 加上 replace: 避免出現錯誤 -> "Hash history cannot PUSH the same path" */}
        <Link to="/" replace>
          React 部落格
        </Link>
      </Brand>
      <NavbarList>
        <StyledLink exact to="/about" replace activeClassName="active">
          關於我
        </StyledLink>
        <StyledLink exact to="/posts" replace activeClassName="active">
          文章列表
        </StyledLink>
        {!user && (
          <StyledLink to="/register" activeClassName="active">
            註冊
          </StyledLink>
        )}
        {!user && (
          <StyledLink to="/login" activeClassName="active">
            登入
          </StyledLink>
        )}
        {user && (
          <StyledLink to="/new-post" activeClassName="active">
            發布文章
          </StyledLink>
        )}
        {user && (
          <StyledLink to="" onClick={handleLogout}>
            登出
          </StyledLink>
        )}
      </NavbarList>
    </HeaderContainer>
  );
}

結果如下：

但這麼寫還有個問題，就是重新整理之後，又會變成未登入狀態，其實 localStorage 還是有 token 存在。

3. useEffect：在 reneder 之後驗證身分

可使用 useEffect 來解決這個問題，如此一來，在畫面 mount 的時候，就會透過 call getMe API 來驗證身分：

export default function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 以 getAuthToken 從 localStorage 讀取 token
    if (getAuthToken()) {
      // 有 token 才 call API
      getMe().then((response) => {
        if (response.ok) {
          setUser(response.data);
        }
      });
    }
  }, []);
  
// ...

補充功能

1. styled-reset：CSS Reset

React 也可搭配 styled-reset 套件，進行 CSS Reset 規格化，詳細參考官方文件。

安裝套件：

$ npm i styled-reset

引入 styled-reset 套件使用：

import React from 'react'
import { Reset } from 'styled-reset'

const App = () => (
  <React.Fragment>
    <Reset />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
)

2. 在 Root 設置全域背景圖片

在 App.js 引入 img：

import img from "../../images/bg.jpg";

以 styled-component 調整 App 中 Root Component 的 css，就會 render 到所有 pages：

const Root = styled.div`
  font-family: "monospace", "微軟正黑體";
  color: #4a4a4a;
  box-sizing: border-box;
  padding: 80px 10px;
  background: #fff url(${img}) center center fixed no-repeat;
  background-size: cover;
  height: 100%;
`;

以 LoginPage.js 為例，可針對不同頁面進行微調：

const Root = styled.div`
  height: 100vh;
  padding-top: 100px;
`;

3. 優化：畫面閃爍問題

在登入狀態時，重整畫面會出現畫面閃爍的問題，如下圖所示：

之所以會有這個現象，是因為畫面進行了兩次 render：

預設為登出狀態（第一次 render）
當我們發 API 確認有登入之後，才會顯示登入狀態（第二次 render）

要改善這個問題的核心概念在於：

在確認是否登入之前，不要顯示和登入登出狀態有關的東西。

在 APP 執行開始，可以有新的 state（isLoadingGetMe 或是 isGettingUser），預設值為 ture，也就是不顯示登入登出。

一旦接收到 getMe() 回傳的 response 時，或是發現沒有 token 時，就會改成 false，顯示登入登出。

useEffect(() => {
  // 以 getAuthToken 從 localStorage 讀取 token
  if (getAuthToken()) {
    // 有 token 才 call API
    getMe().then((response) => {
      if (response.ok) {
        setUser(response.data);
        setLoadingGetMe(false);
      }
    });
  } else {
    setLoadingGetMe(false);
  }
}, []);

也可以實作一個 Loading 畫面，等到渲染完成再顯示頁面。

4. 函式宣告 vs 函式呼叫

這裡以 onChange 事件監聽為例：

宣告函式 handlePageChange，當 onChange 時會執行函式 handlePageChange

onChange={handlePageChange}

會直接呼叫函式 handlePageChange()，並傳入參數 page

onChange={handlePageChange(page)}

定義一個新的函式給 onChange，當 onChange 時會執行丟進去的函式

onChange={() => handlePageChange(page)}

// 等同於
onChange={function() { 
  return handlePageChange(page)
}

結語

在實作部落格時可以發現，我們在最一開始雖然擬定了專案架構，實際上還是會在實作的過程進行調整，最後構成的專案架構如下：

src
- components 組件
  - App 管理路由、設置全域變數
  - Header 導覽列
  - Footer 置底訊息
- constants 常數
- pages 頁面
  - HomePage 首頁（顯示最新五篇）
  - AboutPage 關於我
  - PostListPage 文章列表頁面
  - PostPage 單一文章頁面
  - NewPostPage 發布文章頁面
  - LoginPage 登入頁面
  - Register 註冊頁面
- WebAPI.js 管理 API
- utils.js 管理常用方法
- contexts.js 管理傳給子層的 value

一旦 components 資料夾中，結構變得更複雜時，會再根據不同功能來區分資料夾，例如 common、post，注意當檔案是 compontent 時，才會以大寫英文開頭命名。

如何進行身分驗證？

透過 Cookie 驗證

把 Session ID 存在 LocalStorage

打一個 POST API 到 Server

透過 token 取得使用者資訊

實作：登入功能

1. 設定串接 API 的方法：登入 & 身分驗證

2. 實作 LoginPage.js

3. 建立 utils.js 管理常用功能

4. 串接 API：login

useHistory：跳轉頁面

實作：身分驗證

1. createContext：傳入預設值

2. Context Provider：提供子層 value

3. useEffect：在 reneder 之後驗證身分

補充功能

1. styled-reset：CSS Reset

2. 在 Root 設置全域背景圖片

3. 優化：畫面閃爍問題

在確認是否登入之前，不要顯示和登入登出狀態有關的東西。

4. 函式宣告 vs 函式呼叫

結語