积分商城项目笔记（二）登录功能验证和微信登录

1.登录功能的验证

1. 手机号验证

  // 1. 手机号码的验证(11位数字)
            let reg = /^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}/;
            if (!reg.test(this.phoneNumber)) {
                alert("请输入正确的手机号~");
                return;
            }

2. 拼图滑块的验证

 if (this.msg == '再试一次' || this.msg == "向右滑动") {
                // 此时说明用户没有拖拽验证，或者验证失败了
                alert("拼图滑块验证码失败，请移动滑块到正确位置~")
                return
            }

3. 获取验证码的倒计时编写

4. 获取验证码的网络请求

发现返回的数据报如下错误：

其实接口上有需要我们修改请求头Content-Type字段，并使用qs.stringnify进行格式转换：

解决方法：

• 安装qs进行格式转换

npm install qs

• 导入使用 测试：

console.log(qs.stringify({ name: 'Vue' }));

import qs from "qs"
// 发送短信验证码请求
export const SendSMSAPI = params => request.post("/sendSMS",qs.stringify(params));

5. 对发送短信验证码进行抽取

• 在服务器响应后，统一对结果进行处理。
• 避免的各个文件里进行处理。

instance.interceptors.response.use(res => {
    // 什么时候，执行这里的代码，在后端返回响应，在进入到组件中成功的回调函数之前，执行。
    // res是一个对象,原先axiso封装的res对象。
    // console.log("res", res);
    // 这个函数什么作用：
    // 1.可以用来做请求前的准备工作

    // 2.对服务器返回的数据做统一的处理
    let res_data = res.data;
    if (res_data.code != 0) {
        // 弹出错误信息
        alert(res_data.message);
        return false;
    }
    return res_data;

}, err => {
    // 将错误抛出
    return Promise.reject(err)
})

6. 对手机号验证进行抽取

7.trim()

的作用是去掉字符串两端的多余的空格*，注意，是两端的空格，且无论两端的空格有多少个都会去掉。

8. 提示登录的离开和进入状态的处理。

transition包裹：

 <transition name="fade">
      <toast v-show="isShowToast"></toast>
    </transition>

css样式

// 进场时候，过渡的开始状态。==离开时候过渡的结束状态
.fade-center,
.fade-leave-to {
  opacity: 0;
}

// 指定过渡的属性和时间
.fade-enter-active,
.fade-leave-active {
  transition: opacity .8s;
  ;
}

// 进场时，过渡的结束状态==离开时候，过渡的开始状态
.fade-enter-to,
.fade-leave {
  opacity: 1;
}

2.微信登录功能

1. 获取微信二维码

• 在 public/index.html 的head标签中引入：

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

• 在对应盒子，添加id

<div id="weixin" class="qrcode" v-show="!isShowForm">
     二维码
</div>

2. 在点击切换到微信登录的函数中：

	weixinClick(){// 点击切换微信扫码登录这一项，并向微信扫码登录
            this.isShowForm=false;

            // 微信登录第一步：申请微信登录二维码
            let _this = this;
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死
                scope: "snsapi_login",
                // 扫码成功后重定向的接口
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                // state填写编码后的url
                state: encodeURIComponent(window.btoa("http://127.0.0.1:8080" + _this.$route.path)),
                // 调用样式文件
                href: "",
            });

        },

• 调用样式
• node执行data-url.js文件，获取样式。

3. 扫码后，地址栏

4. 逻辑说明

5. 微信扫码登录——临时票据code换取token

1. 我们需要在顶部组件TopBar.vue，加载的时候，用临时票据code换取token

import {WeixinLoginApi} from "@/request/api"

...
created(){
    // 微信登录第二步：临时票据code换取token
    let mycode = this.$route.query.code;
    if (mycode) {  
        // 有code才去换取token
        WeixinLoginApi({
          code: mycode,
        }).then((res) => {
          console.log(res);
          if (res.code === 0) {
            // 登录成功
            // 1、提示用户登录成功
            this.asyncChanToastState({
                msg:"登录成功",
                type:"success"
            });
            // 2、保存token值
            localStorage.setItem("x-auth-token", res["x-auth-token"]);
            // 3、改变登录状态
            this.chanIsLogined(true);
          }
        })
    }
}

2. 登陆成功，清除地址栏上显示的code，在成功的回调函数中：

// 4、清除浏览器地址栏上的code
this.$router.push(this.$route.path);
/*
setTimeout(()=>{
	this.$router.go(0)
},2000)
*/

3. 当返回的res.code不为0，表示登录失败

if (res.code === 0) {
	...
}else{
    // 登陆失败给出提示信息
    this.asyncChanToastState({
        msg:res.message,
        type:"danger"
    });
}

4. 拿不到code的时候，也更新一下用户登录状态：

	if(mycode){
    	....   
    }	
	else{
      // 没有mycode的时候也设置用户状态

      // 没有code说明，用户没扫码
      // 说明用户已经登录的不用扫码，或者用户没有登录没扫码，
      // 判断用户能否拿到token来做出登录状态的更新
      let mytoken = localStorage.getItem("x-auth-token")
      this.chanIsLogined(Boolean(mytoken));
    }