ログイン手順（ユニアプリ）
記事ディレクトリ
1. ログインの実装
1. ログイン要求 /api/admin/loginUser を送信します
。 2. 返されたコードが 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、SMS認証コードを取得
//发送短信验吗
router.post('/code',function(req,res,next){
let phone=req.body.phone
//短信应用SDK
var appid=1400187558;
// appKey
var 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'
//生成token
let 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. ユーザーの携帯電話番号が要件を満たしている場合は、バックエンドサーバーの送信者に /api/admin/code を要求し
ます確認コードが正しく入力されていること。次のステップに進む必要があります。
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
}
//查询手机号对应的id
connection.query(user.queryUserTel(params),function(error,results){
let id=results[0].id
let pwd=results[0].password
var sql='update users set password= '+params.userPwd+' where id='+id
console.log(sql)
connection.query(sql,function(error,results){
res.send({
code:200,
data:{
success:true,
msg:'修改成功'
}
})
})
})
})
4.トークン
トークンを使用するプロセスは次のとおりです:
(1) ユーザーがリクエストを開始し、ユーザー名とパスワードを送信します;
(2) サーバーがユーザー名とパスワードを検証します;
(3) サーバーがトークンを生成してトークンを返します。クライアント;
(4) クライアントはトークンを保持し、トークンをパラメータとして送信し、リクエストを開始します;
(5) サーバーはトークンを検証し、検証に合格した後にリクエスト データを返し、トークンを更新します;
(6) クライアント更新されたトークンを取得し、今後のリクエストには最新のトークンが含まれるため、ステートレス ID が実現されます。
1.1 ノード環境構成トークン
npm install jsonwebtoken
2.2 トークンの生成
//引入token包
let pwd=require('jsonwebtoken')
//用户信息
let payload={
phone:req.body.phone
}
//口令
let secret='xiaoming'
//生成token
let token =pwd.sign(payload,secret)