Vue elementUI实现免密登陆与号码绑定功能

下面是详细的Vue elementUI实现免密登陆与号码绑定功能的攻略：

简介

Vue elementUI是常用的前端框架之一，它有完善的组件库，可以方便地实现各种功能。本次攻略将讲解如何使用Vue elementUI实现免密登陆与号码绑定功能。

免密登陆功能

前提条件

需要做到以下几点：

1. 用户在第一次使用时填写并提交了手机号码；
2. 站点后端需要可以将用户手机号码和用户的唯一标识存储起来。

前端实现

首先，在登陆页面需要增加一个勾选框，让用户可以选择免密登陆：

<template>
  <div>
   <el-input v-model="phone" placeholder="手机号码" style="width: 300px"></el-input>
   <el-button @click="login">登陆</el-button>
   <el-checkbox v-model="remember" style="margin-left: 10px;">免密登陆</el-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      remember: false
    };
  },
  methods: {
    login() {
      // 登陆方法
    }
  }
};
</script>

接着，在登陆成功后需要判断用户是否选择了免密登陆，如果选择了，就将用户的信息（包括用户的唯一标识和手机号码）存储在本地：

if (this.remember) {
  localStorage.setItem('userInfo', JSON.stringify({
    uid: 'userId',
    phone: this.phone
  }));
}

接下来，在需要获取用户信息的地方，先从本地读取用户的信息。如果本地不存在，就要求用户重新登陆；如果存在，就使用本地存储的信息登陆：

const userInfo = localStorage.getItem('userInfo');
if (!userInfo) {
  // 本地不存在用户信息，要求用户重新登陆
  this.$router.push('/login');
} else {
  // 使用本地存储的信息登陆
  const { uid, phone } = JSON.parse(userInfo);
  // ...
}

需要注意的是，由于用户的唯一标识是站点后端生成的，在每次进入站点时都会不同，因此需要将用户的手机号码与唯一标识绑定。

号码绑定功能

前提条件

需要做到以下几点：

1. 用户已经登陆；
2. 站点后端需要提供一个接口，可以将用户手机号码和唯一标识进行绑定。

前端实现

在需要绑定手机号码时，在前端页面中增加一个输入框和一个按钮：

<template>
  <div>
   <el-input v-model="phone" placeholder="手机号码" style="width: 300px"></el-input>
   <el-button @click="bind">绑定</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: ""
    };
  },
  methods: {
    bind() {
      // 绑定手机号码方法
    }
  }
};
</script>

当用户点击“绑定”按钮时，调用后台接口进行绑定：

const userInfo = localStorage.getItem('userInfo');
if (!userInfo) {
  // 用户未登陆
  this.$router.push('/login');
} else {
  // 获取用户信息
  const { uid, phone } = JSON.parse(userInfo);

  // 调用后端接口进行绑定
  this.$http.post('/api/bindPhone', {
    phone: this.phone,
    uid
  }).then(res => {
    if (res.data.success) {
      // 绑定成功
      this.$message.success("绑定成功");
    } else {
      // 绑定失败
      this.$message.error("绑定失败");
    }
  });
}

需要注意的是，站点后端需要检查用户信息和前端提交的信息是否匹配，如果不匹配则绑定失败，在返回结果时需要传递一个标识（如“success”），通过这个标识来判断绑定是否成功。