为什么if语句中的console.log无法执行？

嘿，我一下子就get到问题所在啦！你写的这个login函数是带'use server'指令的服务器端动作函数，它的代码是运行在服务器上的，不是浏览器环境里！

所以你在if (error)里写的console.log(error)，其实是把日志输出到启动Next.js项目的终端/控制台里，而不是你打开浏览器开发者工具看到的那个控制台。你之前觉得redirect能生效，是因为服务器端执行了redirect指令，浏览器收到响应后跳转，但服务器端的log不会自动同步到浏览器里来~

那怎么让浏览器能看到错误信息呢？给你两个实用办法：

1. 查看服务器终端日志：测试的时候，你看看启动Next.js的那个命令行窗口，里面应该能看到错误信息的输出。
2. 把错误返回给客户端处理：修改服务器端函数，把错误信息返回给调用它的客户端组件，然后在客户端组件里用console.log输出。比如这样改：

首先修改服务器端的login函数：

'use server'

import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
import { createClient } from '../../utils/supabase/server'

export async function login() {
  const supabase = await createClient()

  const { data, error } = await supabase.auth.signInAnonymously()

  if (error) {
    console.log(error) // 这行会输出在服务器终端
    return { error: error.message } // 将错误信息返回给客户端
    // redirect('/anonlogin')
  } else {
    revalidatePath('/', 'layout')
    redirect('/')
  }
}

然后在一个客户端组件（带'use client'指令）里调用它：

'use client'
import { login } from './path-to-your-server-action'

export default function LoginButton() {
  const handleLogin = async () => {
    const result = await login()
    if (result?.error) {
      console.log(result.error) // 这时候就会在浏览器控制台显示错误啦
    }
  }

  return <button onClick={handleLogin}>匿名登录</button>
}

这样一来，服务器端的错误日志会留在终端，客户端也能拿到错误信息并在浏览器控制台输出，完美解决你的需求~

备注：内容来源于stack exchange，提问作者Shane Harley