小程序根据token判断进行登录授权
这个难题伴随我快三四天了，今天终于弄懂了，今天就顺顺思路。
toekn用户权限标识，相当于一把钥匙,安全性高，3-5分钟不用就会失效,它是由后端生成的，我们拿过来用就好了
如何进行登录授权呢？
1. 点击封装的登录模块中的”允许“按钮—执行processLogin方法
页面wxml代码：
1.1我的页面中的mine.wxml页面
<import src="/template/login/login.wxml" /> //引入我创建的弹框模块的页面
<view>
//这个是刚开始没有登录的用户信息的页面
<view class="login" wx:if="{
{loginStaus}}">
<view class="login_icon">
<image src="../../assets/head_03.jpg"></image>
</view>
<view catchtap="toLogin">立即登录</view>
</view>
//这是弹框模块的引入
<template is="lp" data="{
{hidden:hidden}}"></template>
</view>
1.2mine.js中一些状态的定义：
data: {
hidden: false, //弹框默认隐藏
loginStaus: true //开始显示--->没登录页面
},
1.3封装的弹框登录模块页面：
<template name="lp">
<view class="lp" wx:if="{
{hidden}}">
<view class="login">
<view class="login_icon">
<image src="../../assets/head_03.jpg"></image>
</view>
</view>
<van-button type="primary" open-type="getUserInfo" bindgetuserinfo="processLogin">登录</van-button>
<van-button type="default" bindtap="cancle">不配使用</van-button>
</view>
</template>
//open-type="getUserInfo" 是为获取用户信息
1.4点击封装的登录模块中的”允许“按钮—执行processLogin方法
//登录按钮
processLogin(e) {
console.log('处理登录：',e)
//如果没有userinfo则直接返回并提示取消
if(!e.detail.userInfo) {
wx.showToast({
title: '取消',
})
return;
}
//如果用userInfo，则调用register注册方法
WXunil.register(this);
},
2.去执行注册和登录方法
这个嘛我使用微信小程序项目中的utils工具，我在其文件夹中创建了一个index.js,用来封装一些方法。
//这个是封装的接口， userRegister用户注册接口，userLogin用户登录接口，checkToken是查看token是否失效的接口
const {
userRegister, userLogin, checkToken} =require('../http/api.js')
//封装一些登录鉴权的方法
//注册的方法
function register(page) {
console.log('注册')
let _this=this;
wx.login({
success(res) {
console.log('wx.login:',res);
let code=res.code;
//获取用户信息，得到iv,encryptedData...
wx.getUserInfo({
success(res) {
console.log('登录中获取用户信息：',res)
let {
iv, encryptedData}=res;
//调用API工厂提供注册接口完成腾讯用户信息写入公司后台数据库
userRegister({
code, iv, encryptedData}).then(res=>{
console.log('注册成功返回的结果：',res)
//注册成功，开始去调用登录方法
_this.login(page);
})
}
})
}
})
}
//登录的方法
function login(page) {
console.log('调用登录方法')
wx.login({
success(res) {
let code=res.code;
//开始调用API工厂（你们的公司后台封装的接口）提供的登录接口
userLogin(code).then(res=>{
console.log('登录成功返回的信息：：：：：：',res)
if(res.code!==0) {
wx.showToast({
title: '登录信息有误',
})
return;
}
//将token和uid存在本地
let {
token,uid}=res.data;
wx.setStorageSync('token', token)
wx.setStorageSync('uid', uid)
if(page) {
//手动刷新我的页面，page则当前代表的是我的页面
page.onShow()
}
})
}
})
}
//检测微信登录态方法
async function checkSession() {
return new Promise((resolve,reject)=>{
wx.checkSession({
success() {
resolve(true)
},
fail() {
resolve(false)
}
})
})
}
//检测登录态或toke是否有效
async function checkHasLogin(token) {
//检测微信登录态（seesion_key）是否失效
const logined=await checkSession()
if (!logined) {
wx.removeStorageSync('token')
return false;
}
//检测token是否失效
const isToken=await checkToken(token)
console.log('isToken:::::',isToken)
if(isToken.code!==0) {
wx.removeStorageSync('token')
return false;
}
return true;
}
//抛出模块
module.exports={
register,
login,
checkHasLogin,
}
上面登录方法中将生成的token和uid存在本地时，执行了刷新页面的方法，
这些方法在mine.js中执行
//调用工具里的方法 ，register封装的注册方法，checkHasLogin封装的token检测方法
const {
register, checkHasLogin }=require('../../utils/auth.js')
//读取后台api接口，getUserDetail引入用户详细信息的接口
const {
getUserDetail} =require('../../http/api.js')
//进入页面就触发
async onShow() {
console.log('onShow')
const token=wx.getStorageSync('token')
//执行上面工具中封装的检测token的方法
const isLogin = await checkHasLogin(token);
console.log('await-isLogin::', isLogin)
this.setData({
hidden:!isLogin，
loginStatus:false //隐藏刚开始的没有登录的盒子
})
if (isLogin) {
//读取用户信息接口
this.getUserInfo();
},
//登陆成功后获取用户的详细信息
//读取用户信息
async getUserInfo() {
const token=wx.getStorageSync('token')
//读取后台接口
const result=await getUserDetail(token)
console.log('用户详情全在这里：：',result)
let _data={
}
_data.userinfo={
}
_data.userinfo.avatarUrl=result.data.base.avatarUrl;
_data.userinfo.nick=result.data.base.nick;
this.setData(_data);
},
最后在mine.wxml中更新即可。才开始先布个局，给它空出位置，最后将数据渲染上去
//这是后来更新的用户登录的页面
<view class="login" wx:else>
<view class="login_icon">
<image src="{
{userinfo.avatarUrl}}"></image>
</view>
<view catchtap="toLogin">{
{
userinfo.nick}}</view>
</view>
这样就能实现登录授权并将拿到的用户信息更新到页面上。
接口上面可能大家封装的地址不一样，大致思路是这样的。
才开始有点难，但是多顺顺就发现其实也不难哈。