JS SDK调用Parse.User.login()输入正确账号密码无返回问题求助

问题原因及解决方案 #

1 首要触发原因：表单默认提交行为导致页面重载 #

你的登录按钮放在<form>标签内，点击时会触发浏览器原生表单提交逻辑，页面会直接刷新，此时登录请求还未完成响应，success回调自然不会执行。密码错误时接口响应速度更快，能在页面重载前完成返回，所以错误回调可以触发。

• 修复方式：给登录点击事件添加.prevent修饰符，阻止默认表单提交：

<button @click.prevent="login" class="w-100 btn btn-lg btn-primary">Login</button>

2 Parse SDK调用不兼容 #

你目前的用法存在两个兼容问题：

• 引入的是parse/node，这是专门给Node.js服务端使用的版本，在浏览器环境运行会存在存储、请求逻辑的兼容异常

• 新版Parse JS SDK（3.0及以上）已经废弃了success/error回调的传参方式，logIn方法本身直接返回Promise，不需要手动封装一层Promise，旧的回调参数在成功场景不会触发。

• 修复后的parse工具文件代码：

// 替换为通用parse包，不要用parse/node
import Parse from 'parse'

// 初始化逻辑只执行一次，不要每次登录重复初始化
Parse.initialize(parseAppId, javaScriptKey)
Parse.serverURL = 'http://localhost:1337/parse'

export async function userLogin(username, password) {
  try {
    const user = await Parse.User.logIn(username, password)
    console.log('triggered')
    return user
  } catch (error) {
    console.error('Error: ' + error.code + ' ' + error.message)
    throw error
  }
}

3 可选优化：登录方法添加异常捕获 #

你目前的async login方法没有加try/catch，登录出错时会抛出未捕获的Promise异常，建议补充：

async login() {
  try {
    const user = await userLogin(this.username, this.password)
    // 补充登录成功后的逻辑，比如跳转首页、存储用户信息
  } catch (e) {
    // 补充登录错误的用户提示逻辑
  }
}

内容的提问来源于stack exchange，提问作者Thomas K.