1、先安装引入配置好

yarn add leancloud-storage

• 在 src/models/index.js 里操作
• import AV, { Query, User } from "leancloud-storage";

AV.init({
  appId: "xxxxxxxxxxxxxxxxxx",
  appKey: "yyyyyyyyyyyyyyyyyyy",
  serverURL: "https://zzzzzzzzzz"
});

• 上面的 Id、 Key、 serverURL 均是应用凭证处能直接复制

2、再测试一下能否正常使用再写后面的代码

• 加上以下代码

• 这里我在 src/index.js 里引入进行测试

• 保存后打开控制台，刷新页面，即可看到打印出注册成功，说明可以用了

3、现在可以完善后面的代码了（写接口）

• src/models/index.js

const Auth = {
  register(username, password){
    let user = new User();
    user.setUsername(username);
    user.setPassword(password);
    return new Promise((resolve, reject)=>{
      user.signUp().then(loginedUser => resolve(loginedUser), error => reject(error))
    });
  },
  login(username, password){
    return new Promise((resolve, reject) => {
      User.logIn(username, password).then(loginedUser => resolve(loginedUser), error => reject(error));
    })
  },
  logout(){
    User.logOut();
  },
  getCurrentUser(){
    return User.current();
  }
};

export {
  Auth
};

4、使用接口

• 真正用到这些接口的地方，其实只有 src/stores/auth.js 这里
• 完善代码

@action login() {
  return new Promise((resolve, reject) => {
    Auth.login(this.values.username, this.values.password)
      .then(user => {
        console.log('登录成功');
        resolve(user);
      }).catch(err => {
        console.log('登录失败');
        reject(err);
    })
  })
}

@action register() {
  return new Promise((resolve, reject) => {
    Auth.register(this.values.username, this.values.password)
      .then(user => {
        console.log('注册成功');
        resolve(user);
      }).catch(err => {
      console.log('注册失败');
      reject(err);
    })
  })
}

@action logout(){
  Auth.logout()
}

5、完善注册页面

• 主体跟 Login.js 基本一致
• 完善代码

const { AuthStore } = useStores();

const onFinish = (values) => {
  console.log('Success:', values);
  AuthStore.setUsername(values.username);
  AuthStore.setPassword(values.password);
  AuthStore.login()
    .then(()=>{
      console.log('注册成功，跳转到首页')
    }).catch(()=>{
      console.log('注册失败，什么都不做')
  })
};

• 成功

6、完善登录页面

• 与注册页面相似，直接改代码
• 完善代码

const {AuthStore} = useStores();

const onFinish = (values) => {
  console.log('Success:', values);
  AuthStore.setUsername(values.username);
  AuthStore.setPassword(values.password);
  AuthStore.login()
    .then(()=>{
      console.log('登录成功，跳转到首页')
    }).catch(()=>{
      console.log('登陆失败')
  })
};

• 输入刚刚测试注册时写的账号与密码

• 成功