在Next.js 13.4.9中用Zustand管理注册后全局认证状态

要实现注册成功后自动登录，你需要完成以下关键步骤：

1. 确保后端注册接口返回认证Token #

你的/api/register接口在注册成功（返回201状态码）时，需要在响应体中返回用户的认证Token，格式示例：

{
  "token": "your-jwt-or-session-token"
}

2. 修改注册页面的提交逻辑 #

在handleSubmit函数的成功分支里，解析响应获取Token，调用Zustand的login方法更新全局状态，最后跳转到目标页面：

修改后的page.tsx代码 #

"use client";

import { FormEvent, FormEventHandler, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation"; // 新增：导入App Router路由钩子
import { DuplicateUserError } from '@/lib/exceptions/DuplicateUserError';
import useAuthStore from '@/store/AuthStore';
import Error from "@/app/error";
import styles from "./page.module.scss";

const Register: React.FC = (): JSX.Element => {
  const [error, setError] = useState<Error | null>(null);
  const login = useAuthStore(state => state.login);
  const router = useRouter(); // 新增：初始化路由实例

  const handleSubmit: FormEventHandler = async (e: FormEvent) => {
    e.preventDefault();
    const formData: FormData = new FormData(e.target as HTMLFormElement);
    const formValues: { [k: string]: FormDataEntryValue } =
        Object.fromEntries(formData);

    const { username, email, password } = formValues;

    try {
        const res = await fetch("/api/register", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ username, email, password }),
        });

        if (res.status !== 201) {
          setError(new DuplicateUserError());
          return;
        }

        // 新增：解析响应体获取认证Token
        const data = await res.json();
        if (!data.token) {
          throw new Error("注册成功但未返回认证Token");
        }

        // 调用Zustand的login方法更新全局认证状态
        login(data.token);

        // 跳转至首页或用户专属页面
        router.push("/");

    } catch (err: any) {
        console.error(err);
        // 可选：处理网络错误或Token缺失等异常
        setError(err);
    }
  };

  if (error) {
    return (
      <Error 
        error={error} 
        reset={() => setError(null)} 
      />);
  }

  return (
    <div className={styles.container}>
      <div className={styles.login}>
        <form className={styles.form} onSubmit={handleSubmit}>
          <Link href="/login" className={styles.register}>
            switch to login
          </Link>
          <input
            className={styles.input}
            placeholder="username"
            type="text"
            name="username"
            autoComplete="off"
            required
          />
          <input
            className={styles.input}
            placeholder="email"
            type="email"
            name="email"
            autoComplete="off"
            required
          />
          <input
            className={styles.input}
            placeholder="password"
            type="password"
            name="password"
            required
          />
          <button className={styles.button}>Register</button>
        </form>
      </div>
    </div>
  );
};

export default Register;

3. 核心逻辑说明 #

• Token获取：注册成功后必须从后端拿到Token，这是触发全局状态更新的关键参数。
• 状态更新：调用login(data.token)后，Zustand会自动更新token和isAuthenticated状态，同时借助persist中间件将状态同步到localStorage，刷新页面后认证状态不会丢失。
• 页面跳转：通过App Router的useRouter钩子完成跳转，确保用户注册后直接进入已登录状态的页面。

内容的提问来源于stack exchange，提问作者Umar Khan