“下一个/导航”中的 useRouter().push() 不适用于具有下一个身份验证的自定义登录页面

Question

在我的自定义登录页面上成功登录后，我与 next-auth 一起使用，我尝试重定向回回调Url，但这不起作用。 我正在使用 React 18.2.0、next 13.4.8-canary.2 和 next-auth 4.22.1。

登录页面 (\src pp pi uth\signin\page.js):

"use client";

import { signIn } from "next-auth/react";
import { useSearchParams, useRouter } from "next/navigation";
import { useState } from "react";

export default function LoginPage() {
    const router = useRouter();
    const callbackUrl = useSearchParams().get("callbackUrl") || "/";
    const course = callbackUrl.split("/").pop();
    let [loading, setLoading] = useState(false);
    let [password, setPassword] = useState("");
    const [error, setError] = useState("");

    async function onSubmit(event) {
        event.preventDefault();
        try {
            setLoading(true);
            const res = await signIn("credentials", {
                redirect: false,
                courseName: course,
                password: password,
                callbackUrl
            });
            if (!res?.error) {
                setError("");
                console.log(`tryin to redirect to ${callbackUrl}`);
                router.push(callbackUrl);
            } else {
                setError("falsches Passwort");
            }
            setLoading(false);
        } catch (error) {
            setLoading(false);
            setError(error);
        }
    }

    function handleChange(event) {
        event.preventDefault();
        setPassword(event.target.value);
    }

    return (
        <main style={{ display: "flex", justifyContent: "center" }}>
            <div className="LoginContainer">
                <br />
                <div className="LoginBackgroundImage">
                    <h1 className="LoginHeading">Login</h1>
                </div>
                <form onSubmit={onSubmit}>
                    {error ? <strong className="w3-text-red">{error}</strong> : ""}
                    <div>
                        <p style={{ margin: 5 }}>
                            <strong>{course}</strong>
                        </p>
                    </div>
                    <div>
                        <input
                            className="passwordField"
                            required
                            type="password"
                            name="password"
                            value={password}
                            onChange={handleChange}
                            placeholder="Passwort"
                        />
                    </div>
                    <button className="loginButton" type="submit" disabled={loading}>
                        {loading ? "lädt..." : "Anmelden"}
                    </button>
                </form>
            </div>
        </main>
    );
}

从路径中可以看到，我使用新的 /app 目录进行路由。我知道登录过程正在运行，因为我可以在浏览器中手动调用callbackUrl，并显示需要授权的内容。我还可以在开发者控制台中看到该命令

console.log(`尝试重定向到 ${callbackUrl}`);

已执行。但页面一直显示登录页面。

Answer 1

我想，我找到原因了。我

useRouter().push()

的目标页面将自身重定向到登录页面。仅当您未以正确用户身份登录时才应执行此重定向。由于重定向已经执行一次以到达登录页面，因此尽管随后登录了正确的用户，但之后可能会再次执行重定向。原因可能是目标页面是未呈现的服务器页面登录后再次。我现在已经解决了这个问题，方法是直接链接到登录页面，而不先调用目标页面，并且只有在登录后才第一次调用目标页面。