使用Clerk.js完成认证后，如何将用户重定向到自定义URL？

我在网站中用HTML+JS搭配Clerk.js实现认证功能，希望用户成功登录或注册后自动重定向到指定URL。目前已在index.html中引入Clerk SDK：

<script
    async
    crossorigin="anonymous"
    data-clerk-publishable-key="myKey"
    src="https://cdn.jsdelivr.net/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
    type="text/javascript"
>
</script>

并通过以下代码初始化Clerk并检查登录状态：

window.addEventListener("load", async function () {
    try {
        // Initialize Clerk
        await Clerk.load();
        console.log("ClerkJS is loaded");

        // Check if the user is authenticated
        if (Clerk.user) {
            console.log("User is logged in");
            const url = "https://myUrl.com"
            window.location.href = url;

        } else {
            console.log("User is not logged in");
        }
    } catch (error) {
        console.error("Error initializing Clerk:", error);
    }
});

我原本期望Clerk能提供类似signInForceRedirectUrl或signUpForceRedirectUrl的便捷配置，但不清楚纯JS SDK的实现方式。之前尝试通过检查Clerk.user并用window.location.href重定向，但希望改用Clerk内置方法或配置来处理这个需求。

Clerk.js提供了内置的重定向配置和方法，无需手动用window.location.href，以下是适配纯JS场景的几种实现方式：

1. 初始化时配置全局重定向URL #

在Clerk初始化阶段直接指定登录/注册后的跳转地址，这是最便捷的全局配置方式：

window.addEventListener("load", async function () {
    try {
        // 初始化时配置默认重定向地址
        await Clerk.load({
            afterSignInUrl: "https://myUrl.com",
            afterSignUpUrl: "https://myUrl.com"
        });
        console.log("ClerkJS is loaded");

        // 已登录状态下，用Clerk内置方法重定向
        if (Clerk.user) {
            Clerk.redirectTo("https://myUrl.com");
        }
    } catch (error) {
        console.error("Error initializing Clerk:", error);
    }
});

• afterSignInUrl：设置用户登录成功后的默认跳转地址
• afterSignUpUrl：设置用户注册成功后的默认跳转地址
• Clerk.redirectTo()是Clerk封装的重定向方法，会自动处理认证状态同步，比直接操作window.location更适配Clerk的认证流程。

2. 针对预构建组件配置重定向 #

如果你使用Clerk提供的预构建组件（如<clerk-sign-in>、<clerk-sign-up>），可以直接通过组件属性指定重定向地址：

<!-- 登录组件指定跳转地址 -->
<clerk-sign-in redirect-url="https://myUrl.com"></clerk-sign-in>

<!-- 注册组件指定跳转地址 -->
<clerk-sign-up redirect-url="https://myUrl.com"></clerk-sign-up>

也可以通过JS动态修改组件属性：

const signInComponent = document.querySelector('clerk-sign-in');
signInComponent.redirectUrl = "https://myUrl.com";

3. 监听认证事件实现自定义重定向 #

如果需要更灵活的逻辑（比如根据用户角色跳转不同地址），可以监听Clerk的认证事件，触发后调用Clerk.redirectTo()：

window.addEventListener("load", async function () {
    try {
        await Clerk.load();
        console.log("ClerkJS is loaded");

        // 监听登录成功事件
        Clerk.addListener('signIn', (user) => {
            // 根据用户信息动态调整跳转地址
            const redirectUrl = user.publicMetadata.isAdmin 
                ? "https://admin.myUrl.com" 
                : "https://myUrl.com";
            Clerk.redirectTo(redirectUrl);
        });

        // 监听注册成功事件
        Clerk.addListener('signUp', (user) => {
            Clerk.redirectTo("https://myUrl.com/welcome");
        });
    } catch (error) {
        console.error("Error initializing Clerk:", error);
    }
});

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