着重记录下思路以及关键代码. 完整代码请点击这里
触发登录/注册机制
当我们点击保存的时候, 检测是否有用户登录, 若没有用户登录, 则弹出登录框. 按情况让用户选择登录或者注册功能.
<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