登录功能实现

一、pc端登录（Vue）

1. 账号密码登录

无非就是调后端接口。

2. 短信验证码登录

// 步骤如下：
 
1.用户输入手机号，点击发送验证码
（1）前端要进行正则校验手机号
（2）如果合法就弹出滑块组件。
 
2.展示滑块组件（插件）：插件本身做的事
（1）发请求：
     前端给后端传递：验证码 + 随机数uuid + 当前时间戳，
     后端给前端响应：背景图 + 小滑块 + 加密的校验码（根据：验证码 + 随机数uuid + 当前时间戳）
（2）前端拿到数据后，要干的活：
     把背景图、小滑块渲染到页面，
     把后端给的'加密校验码'存储起来（存储到一个变量或者存储到本地都行）
（3）用户交互行为：
     鼠标按下：没有跟后端交互。
     鼠标滑动：没有跟后端交互。
     鼠标松开：与后端交互，看（4）
（4）发请求：
     前端给后端传递：小滑块的位置 + 之前后端给的加密校验码
     后端给前端响应：提示成功或者失败 + 第二次加密的校验码（根据：滑块位置 + 第一次加密校验码）
         
3.前端调用短信验证码API
（1）发请求：
    前端给后端传递：手机号 + 之前后端第二次加密的加密校验码
    后端给前端响应：成功就发短信，失败就提示错误就行了    

3. 微信扫码登录

步骤1：思路分析。

（1）后端已经把所需的参数提供给前端了。（参数看下图）
 
（2）前端调API接口，拿到全部参数，并动态的创建一个script标签来加载微信二维码，
         通过new WxLogin({...})，然后把后端给的参数一一传进去，就会自动生成一个二维码
 
（3）注意一下回调地址的填写：前端要写一个回调地址，后端也要写一个回调地址，
     微信开放平台也有一个回调地址，必须三者同时一致，登录成功后才能进行页面重定向。

步骤2：参数列表说明。

步骤3：代码实现。

// 代码实现：
<script setup lang="ts">
import { onMounted } from 'vue'
import { getLoginParamsApi } from '@/api/login.js'
 
// 总结：加载JS脚本、发请求拿到密钥、创建WxLogin对象并传入密钥，生成微信二维码图片。
onMounted(() => {
  const scriptDom = document.createElement('script')
  scriptDom.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
  document.body.appendChild(scriptDom)
  // JS加载完成后要做的事：
  scriptDom.onload = async () => {
    // 发请求拿参数
    const resp = await getLoginParamsApi()
    const { appid, redirectUri, scope, state } = resp.data
    console.log(resp)
 
    // 填入参数，生成微信二维码
    let obj = new WxLogin({
      self_redirect: false,
      id: 'wxLogin',
      appid,
      scope, // 网页直接写死即可：'snsapi_login'
      redirect_uri: decodeURIComponent(redirectUri),
      state
    })
  }
})
</script>
 
<template>
  <div class="login-form">
    <div id="wxLogin" class="qrcode">二维码</div>
  </div>
</template>
 
<style lang="scss" scoped>
// 扫码登录
.login-form {
  .qrcode {
    text