登录流程（uni-app）

文章目录

• • • 登录流程（uni-app）
    • • 1.登录实现
      • 2.登录实现
      • 3.找回密码
      • 4.token

1.登录实现

1.发送登录请求/api/admin/loginUser
2.判断返回的code是否200.
3.code200 则向vuex userLogin传递用户的信息。
4.并且做持久化存储。localStorage.setItem(‘userInfo’,JSON.stringify(user))

<template><view class="login"><view class="login-title">场馆预约</view><view class="login-content"><el-form :model="form" :rules="rules" ref="form" label-width="40px" class="demo-ruleForm"><el-form-item prop="phone"><el-input v-model="form.phone" placeholder="用户名/手机号"></el-input></el-form-item><el-form-item prop="password"><el-input v-model="form.password" placeholder="密码" type="password"></el-input></el-form-item></el-form></view><view class="login-button"><el-button type="info" round @click="onsubmit">登录</el-button></view><view class="login-botton"><view class="login-password" @click="findPassword">找回密码</view><span>|</span><view class="login-zhuce" @click="Registration">注册账号</view></view></view></template><script>import { mapMutations } from 'vuex';export default {data() {return {form: {phone: '',password: ''},rules: {phone: [{ required: true, message: '请输入手机号', rule: '/^1[23456789]\d{9}$/' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]}};},methods: {// ...mapMutations(['user_Login']),//登录onsubmit() {this.$refs.form.validate(valid => {if (valid) {uni.request({url: '/api/admin/loginUser',method: 'POST',data: this.form,success: res => {console.log(res.data.data.data);if (res.data.code == 200) {this.$store.commit("userLogin",res.data.data.data );//页面跳转this.$router.push('/pages/my/my');uni.showToast({title: res.data.data.msg,icon: 'none'});} else {uni.showToast({title: res.data.data.msg,icon: 'none'});}}});} else {console.log('error submit!!');return false;}});},Registration() {console.log('hah ');uni.navigateTo({url: '../../pages/login/registration'});},findPassword() {console.log('hah ');this.$router.push('/pages/login/findPassword');}}};</script><style lang="less">.login {.login-title {padding-top: 150rpx;display: flex;justify-content: center;font-weight: 700;font-size: 40rpx;letter-spacing: 5rpx;margin-bottom: 50rpx;}.demo-ruleForm {width: 90%;height: 60rpx;}/deep/.el-input__inner {height: 100rpx;border-radius: 50rpx;padding-left: 40rpx;}.login-botton {}/deep/.el-button--info {width: 80%;margin-left: 12%;margin-top: 260rpx;height: 80rpx;}.login-botton {display: flex;margin-top: 100rpx;justify-content: center;.login-password {padding-right: 20rpx;color: #2d66e3;}.login-zhuce {padding-left: 20rpx;color: #2d66e3;}}}</style>

/api/admin/loginUser 服务端的代码。

// 普通用户登录数据router.post('/loginUser', function(req, res, next) {let params={phone:req.body.phone,password:req.body.password}connection.query(user.queryUserTel(params),(err,results,fields)=>{//手机号存在if(results.length>0){connection.query(user.queryUserPwd(params),(err,results,fields)=>{if(results.length>0){//手机号和密码都对res.send({code:200,data:{success:true,msg:'登录成功',data:results[0]}})}else{//密码不对res.send({code:302,data:{success:false,msg:'密码不对'}})}})}else{//不存在，返回错误信息res.send({code:301,data:{success:false,msg:'手机号不存在'}})}})})

2.登录实现

1验证码时要判断用户输入的手机号是否满足要求。
2.若满足要求则向服务器发送 /api/admin/code
3.判断请求返回是否成功。
4.则返回用户手机的验证码

== 注册阶段==，则要判断用户输入的验证码与服务器返回的验证码是否相同。
2.如果验证码真确则，则需要判断用户是否已近存在 /api/admin/addUser。
3.若用用户存在则直接登录跳转。
4.若用户不存在则需要向数据中添加用户。

<template><view class="registration"><view class="registration-content"><el-form :rules="rules" ref="form" label-width="40px" class="demo-ruleForm"><el-form-item prop="phone"><el-input v-model="phone" placeholder="手机号"></el-input></el-form-item><el-form-item prop="code" class='pwd'><el-input v-model="userCode" placeholder="验证码" type="password"></el-input><el-button type="warning" :disabled='disabled' @click='sendCode'>{{codeMsg}}</el-button></el-form-item></el-form></view><view class="login-button"><el-button type="info" round @click="login">注册</el-button></view><view class="registration-botton"><view class="registration-password" @click="goBack">密码登陆</view></view></view></template><script>export default {data() {return {phone:"",userCode:'',disabled:false,codeNum:10,codeMsg:'获取验证码',code:"",rules:{phone:{rule: '/^1[23456789]\d{9}$/',meg:'手机的格式不对'}}};},methods:{sendCode(){if (this.phone == '') {uni.showToast({title: '手机号不能为空',icon: 'none'});} else if (this.phone != '') {var reg = /^1[3456789]\d{9}$/;if (!reg.test(this.phone)) {uni.showToast({title: '输入有效的手机号',icon: 'none'});}else{//禁用按钮this.disabled=true//发送请求uni.request({url:'/api/admin/code',method:'POST',data:{phone:this.phone},success:res=>{console.log('11',res.data.data)if(res.data.data.success){this.code=res.data.data.data}}})//倒计时let timer=setInterval(()=>{--this.codeNum;this.codeMsg=`重新发送 ${this.codeNum}`},1000)//判断定时器停止setTimeout(()=>{clearInterval(timer);this.disabled=false,this.codeMsg='获取验证码',this.codeNum=10},10000)}}},//登录login(){if(this.code==''|| this.phone==''){uni.showToast({title:'手机号不能为空',icon:'none'})}else if(this.userCode == this.code){//验证码正确uni.request({url:'/api/admin/addUser',method:'POST',data:{phone:this.phone},success:res=>{//code 200 注册成功if(res.data.code==200){uni.showToast({title:res.data.data.msg,icon:'none'})//给vuex添加数据this.$store.commit("userLogin",res.data.data.data );//路由跳转this.$router.push('/pages/my/my')}else{uni.showToast({title:res.data.data.msg,icon:'none'})}}})}},//密码登录goBack(){this.$router.push('/pages/login/login')},validate(key){let bool=true;if(!this.rules[key].rule.test(this[key])){uni.showToast({title:this.rules[key].meg,icon:'none'})bool=false;return false}return bool}}}</script><style lang="less">.demo-ruleForm {width: 90%;height: 50rpx;padding-top: 100rpx;}/deep/.el-input__inner {height: 100rpx;border-radius: 5rpx;padding-left: 40rpx;}/deep/.el-form-item__content{display: flex;}/deep/.el-button--info {width: 80%;margin-left: 12%;margin-top: 260rpx;height: 80rpx;}.registration-botton {display: flex;margin-top: 50rpx;justify-content: space-between;.registration-password {padding-left: 40rpx;color: #2d66e3;}.registration-zhuce {padding-right: 40rpx;color: #2d66e3;}}</style>

服务端代码/api/admin/code，获取短信验证码

//发送短信验吗router.post('/code',function(req,res,next){let phone=req.body.phone//短信应用SDKvar appid=1400187558;// appKeyvar appkey='填自己的';var phoneNumbers=[phone];var templatedId=舔自己的var smsSign='舔自己的’;var qcloudsms=QcloudSms(appid,appkey);function callback(err,ress,resData){if(err){console.log('err',err);}else{//返回给前端数据res.send({code:200,data:{success:true,data:ress.req.body.params[0]}})}}var ssender = qcloudsms.SmsSingleSender();//往上手机上发送的数据var params=[Math.floor(Math.random()*(9999-1000))+1000];ssender.sendWithParam(86,phoneNumbers[0],templatedId,params,smsSign,"","",callback);})

服务端代码/api/admin/addUser。

//新增用户router.post('/addUser',function(req,res,next){let tel={phone:req.body.phone}//查询用户是否存在connection.query(user.queryUserTel(tel),function(error,results){// if(error) throw error;if(results.length>0){//用户存在res.send({code:200,data:{success:true,msg:"登录成功",data:results[0]}})}else{//新增用户//引入token包let pwd=require('jsonwebtoken')//用户信息let payload={phone:req.body.phone}//口令let secret='xiaoming'//生成tokenlet token =pwd.sign(payload,secret)var sql='insert into users values(null,?,?,?,?,?,?,?,?,?)'connection.query(sql,['小明',"666666",req.body.phone,"12","11","22",token,"0","0"],function(error,results){if(error){console.log('插入失败',error.message);return;} console.log('插入成功:',results); //查询用户connection.query(user.queryUserTel(tel),function(e,r){res.send({code:200,data:{success:true,msg:"登录成功",data:r[0]}})})})}})})

3.找回密码

1.首先判断用户输入的手机号是否符合要求
2.若符合要求则向后端服务器发送器请求/api/admin/code获取验证码
3.若用户验证码填写正确。则需要跳转到下一步。

1.用户输入密码后，判断用户输入的密码是否符合要求。
2.若用户输入的密码符合要求则向服务端发送 /api/admin/updataUser，修改用户数据。
3.若修改用户数据成功，则返回成功信息。并且跳转到登录页面。

<template><view class="registration"><view class="registration-content"><el-form :rules="rules" ref="form" label-width="40px" class="demo-ruleForm"><el-form-item prop="phone"><el-input v-model="phone" placeholder="手机号"></el-input></el-form-item><el-form-item prop="code" class="pwd"><el-input v-model="userCode" placeholder="验证码" type="password"></el-input><el-button type="warning" :disabled="disabled" @click="sendCode">{{ codeMsg }}</el-button></el-form-item></el-form></view><view class="login-button"><el-button type="info" round @click="login">下一步</el-button></view></view></template><script>export default {data() {return {phone: '',userCode: '',disabled: false,codeNum: 10,codeMsg: '获取验证码',code: '',rules: {phone: {rule: '/^1[23456789]\d{9}$/',meg: '手机的格式不对'}}};},methods: {sendCode() {if (this.phone == '') {uni.showToast({title: '手机号不能为空',icon: 'none'});} else if (this.phone != '') {var reg = /^1[3456789]\d{9}$/;if (!reg.test(this.phone)) {uni.showToast({title: '输入有效的手机号',icon: 'none'});}else{//禁用按钮this.disabled = true;//发送请求uni.request({url: '/api/admin/code',method: 'POST',data: {phone: this.phone},success: res => {console.log('11', res.data.data);if (res.data.data.success) {this.code = res.data.data.data;}}});//倒计时let timer = setInterval(() => {--this.codeNum;this.codeMsg = `重新发送 ${this.codeNum}`;}, 1000);//判断定时器停止setTimeout(() => {clearInterval(timer);(this.disabled = false), (this.codeMsg = '获取验证码'), (this.codeNum = 10);}, 10000);}}},//登录login() {if(this.code==''|| this.phone==''){uni.showToast({title:'手机号不能为空',icon:'none'})}else if (this.userCode == this.code) {//验证码正确,查询数据库中是否有这个永辉uni.request({url: '/api/admin/searchUser',method: 'POST',data: {phone: this.phone},success: res => {//code 200 用户存在if(res.data.code==200){this.$router.push('/pages/login/nextPassword?phone='+this.phone)}else{uni.showToast({title:res.data.da.msg,icon:'none'})return;}}});} else if (this.code != this.userCode) {uni.showToast({title: '验证码不正确',icon: 'none'});}},//密码登录goBack() {this.$router.push('/pages/login/login');}}};</script><style lang="less">.demo-ruleForm {width: 90%;height: 50rpx;padding-top: 100rpx;}/deep/.el-input__inner {height: 100rpx;border-radius: 5rpx;padding-left: 40rpx;}/deep/.el-form-item__content {display: flex;}/deep/.el-button--info {width: 80%;margin-left: 12%;margin-top: 260rpx;height: 80rpx;}</style>

服务端代码 /api/admin/updataUser

//修改用户的密码router.post('/updataUser',function(req,res,next){let params={userPwd:req.body.password,phone:req.body.phone}//查询手机号对应的idconnection.query(user.queryUserTel(params),function(error,results){let id=results[0].idlet pwd=results[0].passwordvar sql='update users set password= '+params.userPwd+' where id='+idconsole.log(sql)connection.query(sql,function(error,results){res.send({code:200,data:{success:true,msg:'修改成功'}})})})})

4.token

token使用方法

token的使用流程如下：
（1）用户发起请求，提交用户名和密码；
（2）服务器验证用户名和密码；
（3）服务器生成token，返回给客户端；
（4）客户端拿着token，将token作为参数，发起请求；
（5）服务器验证token，通过验证后返回请求数据，并且更新token；
（6）客户端拿到更新的token，未来的请求都携带最新的token，从而实现无状态的身份验证

1.1 node环境配置token

npm install jsonwebtoken

2.2 生成token

//引入token包let pwd=require('jsonwebtoken')//用户信息let payload={phone:req.body.phone}//口令let secret='xiaoming'//生成tokenlet token =pwd.sign(payload,secret)