⼩程序开发〖⼆〗开发登录页⾯，判断授权，校验登录态前端与后台
springboot代码
⼩程序开发〖⼆〗开发登录页⾯，判断授权，校验登录态
⼀. ⼩程序登录展⽰(Gif图)
⼆. ⼩程序端
这⾥只展⽰⼀下js的逻辑，页⾯代码你们想看的话，等我把这个⼩程序做出来放源码代码转换
checksession -> userAuthorized -> onGetUserInfo ->( wx.login -> wx.request)
// pages/user/user.js
var app =getApp();
Page({
/**
* 页⾯的初始数据
*/
data:{
condition:true,//true为未登录,false为已登录;true就展⽰登录按钮
condition:true,//true为未登录,false为已登录;true就展⽰登录按钮
userInfo:''//⽤户信息
},
/**
* 校验是否授权登录
*/
userAuthorized(){
const that =this
success: data =>{
if(data.authSetting['scope.userInfo']){//如果授权登录过了
var StorageSync("userInfo")//那我直接去缓存中拿到userInfo的值
this.setData({//再实时的更新进去
userInfo: userInfoStorage,
condition:false//控制页⾯条件绑定条件渲染 false就不展⽰登录按钮
})
}else{
this.setData({
condition:true//控制页⾯条件绑定条件渲染 true  就展⽰登录按钮
})
}
}
})
},
/**
* 校验登录态
*/
//验证登录是否过期
checksession:function(){
var that=this
wx.checkSession({
success: res =>{
console.log(res,'登录未过期')
this.userAuthorized();//如果没过期去调⽤校验是否授权登录
},
fail: res =>{
console.log(res,'登录过期了')
this.setData({ condition:true})//若过期了就展⽰登录按钮
}
})
},
/**
* 登录验证代码
*
* <button type="small" class="bg-black" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGetUserInfo">⼀键登录</button> 页⾯⽤⼀个按钮来启动登录
*/
onGetUserInfo(event){//登录启动!
console.log(event)
const userInfo = event.detail.userInfo  //获取⽤户基本信息(不包括openid)
if(userInfo){//如果获取的⽤户信息不为空，那就进⾏下⼀步
const that =this;//处理闭包函数
wx.login({
success:function(login_res){//⽤户进⾏授权登录了
success:(res)=>{
url: server_prefix +'/user/wxLogin',
method:'POST',
header:{
'content-type':'application/x-www-form-urlencoded'
},
data:{
data:{
code: de,//拿到登录授权的code去后台换取openid                  userHead: userInfo.avatarUrl,//去后台更新⽤户数据，下同
userName: userInfo.nickName,
// gender: der
},
success:(res)=>{
console.log(res.data)
if(res.data.status=="success"){//从后台的返回的成功的话
var userdata = res.data;
// 将返回的数据保存到全局的缓存中，⽅便其他页⾯使⽤
wx.setStorage({ key:'userInfo', data: userdata.data })
app.globalData.userInfo = userdata.data //放到全局data⾥
that.setData({
userInfo: userdata.data,//返回的⽤户数据动态更新
condition:false
})
}else{
console.log(res.data,"错误")
that.setData({
condition:true//后台返回错误那我就重新把登录按钮调出来})
}
}
})
}
})
}
})
}else{//要是不给授权就会提醒⽤户
wx.showModal({
title:'警告',
content:'您点击了拒绝授权，将⽆法进⼊⼩程序，请授权之后再进⼊',        confirmText:'返回授权',
success:function(res){
// ⽤户没有授权成功，不需要改变 isHide 的值
firm){
console.log('⽤户点击了“返回授权”');
}
}
});
}
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad:function(options){
this.checksession()//我们在页⾯被加载的时候就调⽤判断是否授权过期},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady:function(){
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow:function(){
},
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide:function(){
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload:function(){
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh:function(){
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom:function(){
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage:function(){
}
})
基本逻辑都写在注释⾥⾯了，开箱即⽤，毕竟我主业是后台啊~ 不可能写的很好啊~~55三. Springboot后台
基本都是Controller层的代码，获取到openid绑定到⽤户，注释看看⼤家都会写的~
@PostMapping("/wxLogin")
public CommonReturnType createUser(
String code,String userHead,String userName,Integer gender
){
//这⼀系列操作是去wx官⽅换取openid
System.out.println("wx-code: "+code);
String url="api.weixin.qq/sns/jscode2session";
Map<String,String> param=new HashMap<>();
param.put("appid","你⾃⼰的appid");
param.put("secret","你⾃⼰的secret");
param.put("js_code",code);
param.put("grant_type","authorization_code");
String wxResult= HttpClientUtil.doGet(url,param);//这⾥使⽤了HttpClientUtil⼯具类发送Http请求
JSONObject jsonObject = JSON.parseObject(wxResult);//返回的Json字符串，我们使⽤阿⾥的FastJson转化//获取到的openid与sessionKey
System.out.println(jsonObject);
//从wx获得⽤户唯⼀标识
String openid = String("openid");
//初始化⼀个User
User user=new User();
user.setUserAvatar(userHead);
user.setUserGender(gender);
user.setUserName(userName);
user.setUserOpenid(openid);
//去数据库查⼀下存在这个对象不
final User findUser = userService.UserOpenid());
if(findUser==null){
//若数据库没存在这个对象，则插⼊
//将⽤户注册进数据库
final Integer isTrueInsert = userService.userLogin(user);
System.out.println("数据库插⼊情况:"+isTrueInsert);
User RtUser=userService.UserOpenid());//返回⼀个最新的⽤户数据，带⾃增Id at(RtUser);
}else{
//若对象存在，则更新
final Integer rowByFluenced = userService.updateUser(user);
System.out.println("数据库更新了"+rowByFluenced+"⾏");
User RtUser=userService.UserOpenid());//返回⼀个最新的⽤户数据，带⾃增Id at(RtUser);//这⾥返回了通⽤模板
}
}
}
附赠HttpClient⼯具包
package com.feheadmunity.utils;
import org.apache.http.NameValuePair;
import org.apache.ity.UrlEncodedFormEntity;
import org.apache.hods.CloseableHttpResponse;
import org.apache.hods.HttpGet;
import org.apache.hods.HttpPost;
import org.apache.http.client.utils.URIBuilder;
import org.ity.ContentType;
import org.ity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.ssage.BasicNameValuePair;
import org.apache.http.util.EntityUtils;
import t.annotation.Bean;
import t.annotation.Configuration;
import java.io.IOException;
import java.URI;
import java.util.ArrayList;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。