添加登陆注册功能(vue简历编辑器)

着重记录下思路以及关键代码. 完整代码请点击这里

触发登录/注册机制

当我们点击保存的时候, 检测是否有用户登录, 若没有用户登录, 则弹出登录框. 按情况让用户选择登录或者注册功能.

 <button class="button" @click="onClickSave">保存</button>

onClickSave在vue实例app中的methods中定义:

methods: {
    onClickSave(){
          let currentUser = AV.User.current()
          if (!currentUser) {
            this.loginVisible = true
          } else {
            this.saveResume()
          }
        },
}

其中AV.User.current()是leanCloud官方提供的API. 用于检测当前用户. 若有当前用户则返回当前用户, 若没有当前用户则返回null. saveResume()在有用户时将编辑的信息保存给该用户.

methods: {
    saveResume(){
          let {id} = AV.User.current()
          let user = AV.Object.createWithoutData('User', id)
          user.set('resume', this.resume)
          user.save()
        }
}

loginVisible是app实例中的data数据. 当为true时显示登录框, 为false时隐藏. 默认为false. app实例中还有两个相关的数据, 分别为signUpVisible和currentUser:

data: {
    signUpVisible: false,
    currentUser: {
      id: undefined,
      email: undefined
    },
    login: {
      email: '',
      password: ''
    },
    signUp: {
      email: '',
      password: ''
    },
}

signUpVisible用于显示注册页面, currentUser用于存储用户信息.
我们可以在全局进行检测:

let currentUser = AV.User.current()
if (currentUser) {
  app.currenUser = currentUser
}

至于login和signUp则分别是在登录和注册时获取数据以进行下一步操作使用.

登录/注册页

下面时登录/注册页结构

<div v-show="loginVisible" class="login" v-cloak>
    <form class="form" @submit.prevent="onLogin">
      <h2>登录</h2>
      <button type="button" @click="loginVisible = false">关闭</button>
      <div class="row">
        <label>邮箱</label>
        <input type="text" v-model="login.email">
      </div>
      <div class="row">
        <label>密码</label>
        <input type="password" v-model="login.password">
      </div>
      <div class="actions">
        <button type="submit">提交</button>
        <a href="#" @click="signUpVisible = true; loginVisible = false">注册</a>
      </div>
    </form>
  </div>
  <div v-show="signUpVisible" class="signUp" v-cloak>
    <form class="form" @submit.prevent="onSignUp">
      <h2>注册</h2>
      <button type="button" @click="signUpVisible = false">关闭</button>
      <div class="row">
        <label>邮箱</label>
        <input type="text" v-model="signUp.email">
      </div>
      <div class="row">
        <label>密码</label>
        <input type="password" v-model="signUp.password">
      </div>
      <div class="actions">
        <button type="submit">提交</button>
        <a href="#" @click="signUpVisible=false; loginVisible=true;">登录</a>
      </div>
    </form>
  </div>

可以从上面的代码中看到登录页和注册页. 它们都用相似的代码部分:

<a href="#" @click="signUpVisible = true; loginVisible = false">注册</a>
//切换登录/注册页面
 <a href="#" @click="signUpVisible=false; loginVisible=true;">登录</a>

还有:

<button type="button" @click="loginVisible = false">关闭</button>
//关闭登录页面和注册页面 
<button type="button" @click="signUpVisible = false">关闭</button>

以及:

<input type="text" v-model="login.email">
<input type="password" v-model="login.password">
//登录时获取数据, 注册时获取数据
<input type="text" v-model="signUp.email">
<input type="password" v-model="signUp.password">

当表单提交时, 登录表单提交触发onLogin事件

<form class="form" @submit.prevent="onLogin">
//some codes
</form>

onLogin事件也在app实例中定义:

methods: {
    onLogin(e){
      AV.User.logIn(this.login.email, this.login.password).then( (user) => {
        this.currentUser.id = user.id
        this.currentUser.email = user.attributes.email
      },  (error) => {
        if (error.code === 211 && error.code === 210) {
          alert('邮箱和密码不匹配')
        }
      })
    },
}

注册表单提交时触发onSignUp事件, 都在methods对象中:

<form class="form" @submit.prevent="onSignUp">
//some codes
</form>

methods : {
    onSignUp(e){
          const user = new AV.User()
          user.setUsername(this.signUp.email)
          user.setPassword(this.signUp.password)
          user.setEmail(this.signUp.email)
          user.signUp().then(function (user) {
            console.log(user)
          }, function (error) {
          })
        },
}

既然有登录, 那么就有登出功能:

 <button class="button" @click="onLogout" >登出</button>

methods: {
    onLogout(e){
          AV.User.logOut();
          alert('注销成功')
          window.location.reload()
        },
}

参考:
当前用户: https://leancloud.cn/docs/leanstorage_guide-js.html#hash748191977
用户名密码注册: https://leancloud.cn/docs/leanstorage_guide-js.html#hash-452155059
更新对象: https://leancloud.cn/docs/leanstorage_guide-js.html#hash810954180