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')
        })
    }
}

创建组件的时候

LeanCloud 检测当前登录用户API
LeanCloud 用户的属性

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')
    }
}

GitHub 首页源码

第一讲：起步

1. Vue2.0 系列教程：简介
2. Vue2.0 系列教程：npm 常用命令
3. Vue2.0 系列教程：npm package.json 配置文件语法
4. Vue2.0 系列教程：Vue的安装和使用

第二讲： 构建环境和安装依赖

1. Vue2.0 系列教程：初始化项目
2. Vue2.0 系列教程：配置路由
3. Vue2.0 系列教程：使用 leancloud 云服务

第三讲：开发页面

1. Vue2.0 系列教程：注册页面
2. Vue2.0 系列教程：登录页面
3. Vue2.0 系列教程：首页 OR 退出登录