如何在vue-router重定向前执行Supabase异步验证代码？

别在路由配置里写redirect字段，它会优先于导航守卫触发，导致你的异步验证代码根本没机会执行。正确的做法是把所有逻辑都放在beforeEnter里，完成验证后手动控制导航走向。

具体实现步骤：

• 移除/login路由的redirect配置
• 在beforeEnter中异步调用Supabase的魔法链接验证接口（比如signInWithEmailLink）
• 验证成功后，根据to.query.target跳转目标页面；验证失败则跳转到登录页或错误提示页
• 处理target参数缺失的情况，默认跳转到首页

修改后的完整代码示例：

const router = createRouter({
  history: createWebHistory("/"),
  routes: [
    {
      path: "/login",
      name: "login",
      beforeEnter: async (to, from, next) => {
        console.log("beforeEnter called");
        try {
          // 调用Supabase接口验证魔法链接参数并完成登录
          const { data, error } = await supabase.auth.signInWithEmailLink({
            email: to.query.email,
            token_hash: to.query.token_hash,
            redirect_to: window.location.origin
          });

          if (error) {
            // 验证失败，跳转到首页或自定义错误页
            return next({ name: "home" });
          }

          // 验证成功，获取目标路由（默认跳首页）
          const targetRoute = to.query.target || "home";
          next({ name: targetRoute });
        } catch (err) {
          console.error("登录验证出错:", err);
          next({ name: "home" });
        }
      },
      // 可设置登录组件，用于验证失败时显示登录界面
      component: () => import("@/views/Login.vue")
    },
    {
      path: "/",
      name: "home",
      component: Home,
      beforeEnter: async (to, from, next) => {
        // 检查Supabase会话，未登录则跳回登录页
        const { data: { session } } = await supabase.auth.getSession();
        if (!session) {
          next({ name: "login" });
        } else {
          next();
        }
      }
    },
    // 其他路由
  ]
});

关键细节说明： #

• signInWithEmailLink是Supabase官方提供的魔法链接验证方法，会自动处理参数合法性校验并创建用户会话
• 导航守卫的next()方法是核心控制入口：调用next({ name: xxx })即可手动触发重定向，next(false)可中止当前导航
• redirect_to参数要设置为当前页面的origin，避免Supabase会话出现跨域问题

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