微信小程序实现全局登陆状态

一、实现登录功能

当我们输入正确的账号和密码之后，后台提示我们登陆成功，但是我们成功之后再调用获取用户信息的方法时会显示未登录。

因为后端采用的登录鉴权方式是通过cookie的方式进行的鉴权，就是登陆成功之后，后端会给我们cookie上增加一个JSESSIONID，这个JSESSIONID就标识了当前登录用户的身份。

在浏览器中，每次发送请求都会携带cookie，所以在浏览器中我们登录成功之后就可以直接调用登录之后才能访问的接口。但是在小程序端不会默认帮我们带上cookie，这时候手动添加就可以了。

二、搭建简易静态页面

第一步、

首先绑定建议双向数据 model:value="{{ username }}"

model:value="{{ password }}"

登录按钮设置单击事件 bind:tap='login'

第二步、

 data: {
    username:'',
    password:'',
    isLogin:false,
    userInfo:null
  },

 data中定义初始数据

第三步、

在login单击事件里发起登录请求，输入登录账号密码之后，请求成功。

然后会发现在登录请求成功的回调里请求不到用户个人信息

if(res.data.code == 0) {
      const cookie = res.cookies.join(";");
      // console.log(cookie);
      if(cookie.includes('JSESSIONID')){
        wx.setStorageSync('cookie', cookie)
      }
      this.setData({isLogin:true,userInfo:res.data.data})
    }
    get('/api/login-user/info').then(res=>{
      console.log(res);
  })

三、携带cookie请求

这里把登录成功之后产生的cookie，存到了本地缓存中。

用的时候取出来就ok啦。

   // 默认的请求头
  let header = {
    "content-type": "application/x-www-form-urlencoded",
    "cookie": wx.getStorageSync("cookie") || ""
  };

这里的解决办法是把缓存里的cookie，放到了封装请求的默认的请求头中。

这样每次请求的时候都会带上cookie。

四、设置全局登录状态

现在还不能实现全局登录状态。

可以在app.js的  globalData全局数据中定义登录所需要的属性。例如：

globalData: {
    userInfo: null,
    isLogin:false,
    user:null,
  }

在app.js的onshow生命函数中，每次刷新页面的请求一下是否是登录状态。

如果是登陆状态，就让登陆状态isLogin变成true。

get('/api/login-user/info').then(res=>{
      console.log(res);
      if(res.data.code == 0) {
        console.log(this);
        this.globalData.isLogin = true
        this.globalData.userInfo = res.data.data
      }else{
        this.globalData.isLogin = false
        this.globalData.userInfo = null
      }
  })

完成这些后，就已经差不多了。

但是会发现刷新页面并不会展示登录之后的个人信息页面。

五、获取到登陆状态之后显示个人信息页面

是因为请求是异步的，可能登录的状态还没有请求到，页面就已经开始渲染了。

任何一个promise对象都会返回一个promise对象，可以采用链式调用。让它在请求到登陆状态之后再进行渲染页面以及页面的登陆状态。

可以在全局的globalData中定义一个globalPromise:null。

  onShow(){
    this.globalData.globalPromise =  get('/api/login-user/info').then(res=>{
      console.log(res);
      if(res.data.code == 0) {
        console.log(this);
        this.globalData.isLogin = true
        this.globalData.userInfo = res.data.data
      }else{
        this.globalData.isLogin = false
        this.globalData.userInfo = null
      }
  })
  },

 然后在个人中心页面的js中链式调用，获取到登录状态之后再改变全局登陆状态和获取个人信息。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //  判断登陆状态
    app.globalData.globalPromise.then(()=>{
      this.setData({
        isLogin:app.globalData.isLogin,
        userInfo:app.globalData.userInfo,
      })
    })