Vue2.0 系列教程:首页 OR 退出登录
登录成功在首页显示登录信息和退出登录按钮
template 模板
<div>
首页 - 已登录用户信息
<ul v-if="users">
<li>用户名:{{ users.username }}</li>
<li>创建时间:{{ users.createdAt }}</li>
</ul>
<el-button type="danger" v-on:click.native="handlelogOut">退出登录</el-button>
</div>
Script 脚本
结构大纲
<script>
export default {
// 数据
data () {},
// 方法
methods: {},
// 组件创建之后
created () {}
}
</script>
数据结构
data () {
return {
users: null
}
}
方法
methods: {
// 登出函数
handlelogOut () {
this.$AV.User.logOut().then(() => {
// 登出后跳转到登录页面
this.$message('已经登出,正在跳转登录页面')
this.$router.push('/login')
})
}
}
创建组件的时候
created () {
// 获取当前登录用户状态
let user = this.$AV.User.current()
// 如果已经登录则获取用户信息
if (user) {
this.users = {
username: user.get('username'),
createdAt: user.get('createdAt')
}
} else {
console.log('当前未登录,正在跳转登录页面')
this.$router.push('/login')
}
}
文章评论