小程序根据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>

这样就能实现登录授权并将拿到的用户信息更新到页面上。
接口上面可能大家封装的地址不一样，大致思路是这样的。
才开始有点难，但是多顺顺就发现其实也不难哈。