多信息登录、检测用户信息是否完善且引导补全

大家好，我是雄雄，欢迎关注：穆雄雄的博客

前言

现在是2022年4月28日13:41:29！

今天分享两块内容。

1.需求：用户可以通过手机号、邮箱来注册我们的系统，用户完成之后，可以去完善自己的个人信息，比如修改手机号，邮箱以及用户名。下次上来，用户可以使用手机号、邮箱以及用户名三种中的任何一种方式登录系统。

2.登录系统之后，检测用户信息是否完善，比如手机号、邮箱、用户名等，如果不完善，则引导用户去完善个人信息，完善了之后就可以用不同信息对其账号登录。

实现方法

使用手机号、邮箱、用户名以及账号登录系统

其实这个实现起来挺简单的，就是当时绕了很大的坑，给绕进去了。。。。刚开始想了个很简单的方法，就是：判断当前输入的信息长度是不是11位，是的话就是手机号，不是的话，看看有没有@符号，有则是邮箱，否则是账号；但是后来仔细琢磨了下，万一有的用户的账号正好也是11位呢，岂不是直接就乱了。

像这样的需求，直接可以在后台的sql中实现,但当时写sql的时候写了好几种形式：

第一种：

	SELECT * FROM blade_user 
	WHERE (email='muxiongxiong' AND PASSWORD = 'muxiongxiong')
	OR (NAME = 'muxiongxiong'  AND PASSWORD = 'muxiongxiong')
	OR (phone = 'muxiongxiong'  AND PASSWORD = 'muxiongxiong')
	OR (account = 'muxiongxiong'  AND PASSWORD = 'muxiongxiong')

第二种：

	SELECT * FROM blade_user  
WHERE email || NAME || phone || account LIKE '%muxiongxiong%'  AND PASSWORD = 'muxiongxiong'

第三种：

	SELECT * FROM blade_user  
	WHERE 
	(email= 'muxiongxiong' OR NAME= 'muxiongxiong' OR phone= 'muxiongxiong' or account ='muxiongxiong')  
	AND PASSWORD = 'muxiongxiong'

第一种和第三种基本上一样，第二种写法比较新奇，思路是这样的，将这几个字段，用户名，邮箱，电话，账号都拼接在一起，然后通过模糊查询的like去匹配，然后和密码比对进行查询。这几种方式的效率基本都差不多，用哪种都可以。前提是得限制用户的手机号，邮箱，账号以及用户名都是唯一的，极端情况下的话，就是A的账号和B的手机号一样，或者其他字段一样，可能会查询出来多条数据。

刚开始绕弯是因为我把手机号、邮箱等这几个字段理解成了不一样的了，于是结果总是有好多个，还以为自己的sql写错了呢，后来朋友看出来了问题所在，一语指出…

检测用户信息是否完善，否则引导其去完善

登录系统之后需要先拿到当前用户的信息，如果检测到手机号等信息都是完整的，就不需要操作，否则弹框提醒用户去完善个人信息，如下图所示：

点击确认即可直接去个人中心完善自己的信息。

关于弹出框的时机，之前考虑过一进首页就加载，弹出一遍；但是当在使用的过程中，发现这样用户体验度太不好了，包括刷新当前页面的时候也会出现，所以这种方法果断放弃。于是想到了加个标识，每隔20分钟弹出一次，最后发现这种方法在页面加载的时候，也会重复执行，也放弃了。

后来同事用了个别的方法，就是用户首次登陆的时候检测，然后弹出框。通过session的方法来实现的，效果还不错，下面是实现的代码：

	 //查询当前用户的信息
    getCurrentUserInfoDetail(){
      if(!sessionStorage.getItem("isReload")){
        //存入session
        sessionStorage.setItem("isReload","true");
        if(!this.isShowUserInfo){
          this.isShowUserInfo = true;
          getCurrentUserInfo().then(res=>{
            this.userDetails = res.data.data;
            //查看手机号，邮箱，用户名是否为空，是的话跳转到个人信息进行维护
            if(this.userDetails.phone == null || this.userDetails.email == '' || this.userDetails.name == ''){
              //弹出确认的框
              this.$confirm('您的个人信息不完善，请前往个人信息进行维护', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                //确定走这里
                console.log("确定");
                this.$router.push({path: '/info'});
              }).catch(() => {
                //取消的话走这里
              });
            }
          });
        }
      }
    },
      //取消的话走这里
              });
            }
          });
        }
      }
    },

sessionStorage就是vue页面使用的session,不用导入，可以直接拿出来用，给session中设置值： sessionStorage.setItem("isReload","true");，从session中获取值：sessionStorage.getItem("isReload"),这样就可以实现初次登录提醒，后面不管在怎么加载都不会提醒了。