Vue2.0 系列教程:首页 OR 退出登录

2734 次阅读 zuley 发布于 2年前 (2017-01-20) 前端开发 0 评论

登录成功在首页显示登录信息和退出登录按钮

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 退出登录
二维码
扫描此二维码去手机端访问

Vue2.0 系列教程:首页 OR 退出登录

文章评论

发表评论