如何使用Axios提交请求替代Next-Auth默认表单提交实现无刷新登录

核心思路 #

阻止表单默认提交行为，配合Axios异步提交请求，同时利用Next-Auth客户端自带的signIn方法的redirect: false配置实现无刷新会话更新。

具体实现步骤 #

• 改造登录表单的提交逻辑，阻止默认刷新行为
  组件内的提交处理代码示例：

  import axios from 'axios'
  import { signIn } from 'next-auth/react'
  
  const handleLoginSubmit = async (e) => {
    // 阻止表单默认POST提交触发的页面刷新
    e.preventDefault()
    
    // 收集表单数据
    const loginParams = {
      email: e.target.email.value,
      password: e.target.password.value
    }
  
    try {
      // 可提交到你自己的业务服务端做账号密码校验，也可直接提交到Next-Auth自带的credentials回调接口
      const verifyRes = await axios.post('/api/your-custom-login-verify', loginParams)
  
      if (verifyRes.data.code === 200) {
        // 校验通过后调用Next-Auth的signIn方法更新客户端会话，加redirect: false关闭默认跳转刷新
        const loginRes = await signIn('credentials', {
          ...loginParams,
          redirect: false
        })
  
        if (!loginRes.error) {
          // 登录成功后续逻辑：比如路由跳转、成功提示
        } else {
          // 处理Next-Auth会话设置失败逻辑
        }
      }
    } catch (error) {
      // 处理请求异常、账号密码错误等失败逻辑
    }
  }
  

• 调整Next-Auth配置文件pages/api/auth/[...nextauth].js，确保credentials provider的authorize方法可以正常返回用户信息，不要配置强制跳转逻辑。
• 如果不需要Next-Auth自带的会话管理能力，也可以在Axios请求成功后手动将token存储到cookie/localStorage，自行管理会话状态，不过该方案需要额外处理会话过期、权限校验等逻辑，更推荐上面配合Next-Auth内置能力的实现方式。

注意：signIn方法的redirect: false参数是无刷新的核心配置，省略该参数Next-Auth会默认执行服务端跳转，仍然会触发页面刷新。

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