认证与路由守卫（对比拦截器）

import { create } from "zustand";
import { persist } from "zustand/middleware";

interface User { id: number; name: string; roles: string[]; }

interface AuthState {
  token: string | null;
  user: User | null;
  login: (token: string, user: User) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      token: null,
      user: null,
      // 登录成功：token 和用户信息一次写入，自动同步到 localStorage
      login: (token, user) => set({ token, user }),
      // 登出：一次清空，存储同步清掉
      logout: () => set({ token: null, user: null }),
    }),
    {
      name: "auth-storage",
      // 只持久化数据字段，action 不落盘（第 22 篇的 partialize）
      partialize: (s) => ({ token: s.token, user: s.user }),
    }
  )
);

import axios from "axios";
import { useAuthStore } from "../stores/authStore";

export const api = axios.create({ baseURL: "/api" });

// 请求拦截器：每个请求发出前，自动带上 token
api.interceptors.request.use((config) => {
  // 组件外读 store：getState() 拿当前快照，不需要 Hook
  const token = useAuthStore.getState().token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器：401 统一处理，别让每个组件自己兜底
api.interceptors.response.use(
  (res) => res,
  (error) => {
    if (error.response?.status === 401) {
      // token 过期或无效：清登录态，送回登录页
      useAuthStore.getState().logout();
      window.location.href = "/login";
    }
    return Promise.reject(error);
  }
);

import { type ReactNode } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { useAuthStore } from "../stores/authStore";

export function RequireAuth({ children }: { children: ReactNode }) {
  const token = useAuthStore((s) => s.token);
  const location = useLocation();

  if (!token) {
    // 记下「想来而没来成」的页面，登录后原路送回
    return (
      <Navigate to="/login" state={{ from: location.pathname }} replace />
    );
  }
  return <>{children}</>;
}

// 用法：路由表里包一层即生效（对照 authorizeRequests 按路径配置）
// <Route path="/dashboard" element={<RequireAuth><Dashboard /></RequireAuth>} />

import { useLocation, useNavigate } from "react-router-dom";
import { useAuthStore } from "../stores/authStore";
import { api } from "../lib/api";
import { AuthForm } from "../components/AuthForm"; // 表单 UI 略，第 21 篇专讲

function LoginPage() {
  const login = useAuthStore((s) => s.login);
  const navigate = useNavigate();
  const location = useLocation();

  // RequireAuth 重定向时塞进来的原目的地；直接来登录页则去首页
  const from = (location.state as { from?: string } | null)?.from ?? "/dashboard";

  async function handleSubmit(username: string, password: string) {
    // 后端校验账密并签发 token（全景图的第①②步）
    const res = await api.post("/auth/login", { username, password });
    login(res.data.token, res.data.user);
    // replace：登录页不该留在历史记录里，回退键跳过它
    navigate(from, { replace: true });
  }

  return <AuthForm onSubmit={handleSubmit} />;
}