leancloud node.js+vue登录教程

leancloud node.js教程

1.首先在main.js里面初始化 leancloud-storage

import AV from 'leancloud-storage'const APP_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'const APP_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'AV.init({  appId: APP_ID,  appKey: APP_KEY})Vue.prototype.$AV = AV

2.login.vue 表单模板

<el-form label-width="100px" class="demo-ruleForm" v-bind:rules="rules" ref="ruleForm" v-bind:model="ruleForm">      <el-form-item label="账号" prop="name">        <el-input type="text" auto-complete="off" v-model="ruleForm.name" placeholder="请输入账号"></el-input>      </el-form-item>      <el-form-item label="密码" prop="password">        <el-input type="password" auto-complete="off" v-model="ruleForm.password" placeholder="请输入密码"></el-input>      </el-form-item>      <el-form-item>        <!-- 点击进行登录提交 -->        <el-button type="primary" v-on:click="handleSubmit">登录</el-button>        <!-- 点击重置表单 -->        <el-button v-on:click="handleReset">重置</el-button>      </el-form-item></el-form>

3.login.vue 里面添加路由判断

// 进入路由时判断当前登录状态，已登录则跳转到首页  beforeRouteEnter (to, from, next) {    next(VM => {      if (VM.$AV.User.current()) {        console.log('当前登录')        VM.$router.push('/user')      } else {        console.log('当前未登录')      }    })  },

4.login.vue 里面添加数据变量

return {      ruleForm: {        name: '',        password: ''      }    }

5.login.vue 登录注册操作

    methods: {    handleSubmitLogin () {      // 验证表单      this.$refs.ruleForm.validate(valid => {        if (valid) {          console.log('验证通过')          // 调用SDK登录方法，执行登录过程          this.$AV.User.logIn(this.ruleForm.name, this.ruleForm.password).then(loginedUser => {            console.log(loginedUser)            this.$message('成功登录')            // 登录成功跳转到首页            this.$router.push('/')          }, error => {            console.log(error)            this.$message('登录失败，请重试')            // 登录失败清空表单            this.handleReset()          })        } else {          console.log('验证不通过')        }      })    },    // 提交函数    handleSubmitRegister () {      this.$refs.ruleForm.validate(valid => {        if (valid) {          console.log('验证通过')          let user = new this.$AV.User()          user.setUsername(this.ruleForm.name)          user.setPassword(this.ruleForm.password)          // 提交登录          user.signUp().then(loginedUser => {            console.log(loginedUser)            this.$message('成功注册')            // 注册成功后跳转到登录页面            this.$router.push('/login')          }, error => {            console.log(error)          })        } else {          console.log('验证不通过')        }      })    },    // 重置表单    handleReset () {      this.$refs.ruleForm.resetFields()    }  }

6.user.vue 判断用户状态是否登录

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

7.user.vue 用户数据模板

<ul v-if="users">      <li>用户名：{{ users.username }}</li>      <li>创建时间：{{ users.createdAt }}</li></ul><el-button type="danger" v-on:click.native="handlelogOut">退出登录</el-button>  

8.user.vue 初始化用户数据

data () {    return {      users: null    }  },

9.user.vue 登出操作

methods: {    // 登出函数    handlelogOut () {      this.$AV.User.logOut().then(() => {        // 登出后跳转到登录页面        this.$message('已经登出，正在跳转登录页面')        this.$router.push('/login')      })    }  },