Next.js 路由守衛應用

前言

這篇文檔要來總結的是關於在項目中實踐對於 Next 路由守衛、身份認證等機制的實現方法，以及在 Next 中具體要如何使用，和一些自己的採坑紀錄。

正文

需求背景

在我的項目中，需求其實也很常見。對於登陸，我使用的是 JWT token 的認證方式，並且存儲於前端 cookie 瀏覽器中。需求就是希望可以在用戶登陸前檢查 cookie 的 token，如果有 token 才可以允許所有路由放行，如果無 token 則表示用戶尚未登陸或是 token 過期，這種情況下就要重定向到登陸頁，並且對於其他路由攔截用戶訪問請求。

錯誤示範

Next 提供了許多關於用戶安全認證的高級 api 以及中間件，但經過調研發現 Next 不像 vue 或者 react 提供了很完整的路由守衛生態。

最先開始我想的比較簡單，就是直接通過獲取 cookie 來判斷，並做出相應的路由控制，代碼如下：

• 下面為了簡單起見，不給出實際的項目代碼，模擬有一個 /login, /，並且在 localStorage 中直接存儲一個值，通過是否為空進行用戶是否登陸的判斷。

// index.js

import React, {
    useEffect } from "react";
import {
    useRouter } from "next/router";

export default function Home() {
   
  const router = useRouter();

  const logout = () => {
   
    localStorage.removeItem("token");
    router.push("/login");
  };

  useEffect(() => {
   
    if (!localStorage.getItem("token")) {
   
      router.push("/login");
    }
  });

  return (
    <>