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

      })

    }

  },