用Vue/Ajax实现Shopify客户登录，返回200/302仍登录失败如何解决

现存问题 #

• 接口路径错误：当前使用的/account/login是服务端渲染普通表单提交的地址，并非Ajax专用登录接口
• 请求参数格式不符合Shopify规范：Shopify Ajax登录要求登录参数必须嵌套在customer字段下，你当前直接提交了email、password的顶层对象
• 缺少必要请求配置：未声明Ajax请求头，且未禁止axios默认自动重定向逻辑，导致接口返回302时直接跳转无法捕获登录状态
• 错误捕获逻辑为空：无法排查参数错误、账号密码错误等常见异常
• 未处理登录成功后的跳转逻辑：拿到正确响应后没有执行页面跳转操作，自然看不到登录后的状态

修复方案 #

1. 调整请求参数与接口配置 #

登录接口改用/account/login?view=ajax，请求参数外层嵌套customer字段，同时添加请求头禁止重定向

2. 补充异常捕获与状态处理 #

登录成功后手动跳转到账户首页或者之前的访问页面，失败时抛出错误提示用户

3. 修正后的完整代码 #

JS部分

let productForm = new Vue({
  el:".vue-login-form",
  data(){
    return{
      form: {
        email: null,
        password: null,
      },
      customerData: null,
      errorMsg: ''
    }
  },
  methods:{
    async login(){
      this.errorMsg = ''
      try {
        const response = await axios.post('/account/login?view=ajax', 
          {
            customer: this.form // 嵌套customer字段符合Shopify要求
          },
          {
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type': 'application/json'
            },
            maxRedirects: 0 // 禁止自动重定向
          }
        )
        this.customerData = response.data
        // 登录成功跳转，可根据需求替换跳转地址
        window.location.href = '/account'
      } catch (error) {
        // 捕获错误，比如账号密码错误、账号不存在等
        if (error.response?.data?.message) {
          this.errorMsg = error.response.data.message
        } else {
          this.errorMsg = '登录失败，请检查账号密码后重试'
        }
        console.error('登录异常：', error)
      }
    },
    showForgot(){
      // 自行补充忘记密码逻辑
    }
  }
})

HTML模板部分（补充错误提示展示）

<form action="">
  <div class="form-top">
    <h2>Welcome Back!</h2>
    <p>Please login to your account.</p>
    <!-- 新增错误提示展示 -->
    <p v-if="errorMsg" style="color:red;">{{ errorMsg }}</p>
  </div>
  <div class="login-fields">
    <div class="input">
      <input type="email" v-model="form.email" placeholder="Email address">
    </div>
    <div class="input mb-0">
      <input type="password" v-model="form.password" placeholder="Password">
    </div>
    <div class="forgot-pass"><a href="#" type="button" id="ppassword" @click="showForgot">Forgot Password?</a></div>
    <div class="submit-button">
      <button type="button" @click="login()">Log In</button>
    </div>
  </div>
</form>

额外注意事项 #

• 如果你的Shopify店铺开启了多语言/多货币，需要在接口地址中加上对应语种前缀
• 部分Shopify主题可能有自定义的Ajax登录规则，可配合主题文档调整响应处理逻辑

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