1、搭建登陆静态页面

2、登录鉴权

在用户填写完信息之后，点击登录按钮，调用登录接口，根据后台返回内容判断是否登录成功。

       在这里，当我们输入正确的账号和密码之后，后台提示我们登录成功，但是当我们在登录成功之后在调用，获取用户信息的方法的时候，发现提示还是当前用户未登录。这是为什么呢？

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

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

       所以，要实现登录鉴权就要在登录之后将返回值中的cookie保存到本地，并且在之后的每次发送请求时都带上cookie，才能实现登录鉴权。

下面是请求登录的函数（注意要将数据保存在全局中，为不同页面判断是否为登陆状态做准备）

export function login (username,password){

  return post('/api/login',{username,password,rememberMe:true})

}

changeLogin() {

    login(this.data.username, this.data.password).then(res => {

      if (res.data.code == 0) {

        // 登陆成功之后将cookies存入内存

        let cookie = res.cookies.join(';')

        // 判断包含JESSIONID之后进行持久化存储

        if (cookie.includes('JSESSIONID')) {

          // 有的话就把cookie存入内存

          wx.setStorageSync('cookie', cookie)

        }

        wx.showToast({

          title: '登陆成功',

        })

        // 登录之后将数据存入全局

        this.setData({

          userInfo: res.data.data,

          isLoagin: true

        })

        app.globalData.isLoagin = true

        app.globalData.userInfo = res.data.data

      } else {

        wx.showToast({

          icon: 'error',

          title: res.data.msg,

        })

      }

    })

  },

在每次发送请求的时候，在请求头中添加上cookie属性。这里由于我们进行了封装，所以每次发送请求都会执行我们封装好的request方法，我们可以在这里给所有的接口加上cookie

function request(options) {

  // 请求拦截器

  //  ...

  // 1. 加一些统一的参数，或者配置

  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {

    options.url = "https://showme2.myhope365.com" + options.url

  }

  // 默认的请求头

  let header = {

    "content-type": "application/x-www-form-urlencoded",

    // 加上统一的cookie

    "cookie": wx.getStorageSync('cookie') || ''

  };

  if (options.header) {

    header = {

      ...header,

      ...options.header

    }

  }



  return new Promise((reslove, reject) => {

    // 调用接口

    wx.request({

      // 默认的配置

      // 加载传入的配置

      ...options,

      header,

      success(res) {

        // 响应拦截器，所有接口获取数据之前，都会先执行这里

        //  1. 统一的错误处理

        if (res.statusCode != 200) {

          wx.showToast({

            title: '服务器异常，请联系管理员',

          })

        }



        reslove(res)

      },

      fail(err) {

        reject(err)

      }

    })

  })

}



export function get(url, options = {}) {

  return request({

    url,

    ...options

  })

}



export function post(url, data, options = {}) {

  return request({

    url,

    data,

    method: "POST",

    ...options

  })

}

3、判断登陆状态

页面加载完成后判断

       现在我们已经实现了登录功能，但是这里的cookie是有可能会过期的，，所以这里就涉及到了用户登录状态的记录。

       我们可以通过调用获取用户详情的接口来判断当前登录状态是否过期。

登录完成后判断

登录完成后判断一下是否把信息存贮上，所以判断一下登录状态。

加载我的页面判断

并且对于未登录的用户，单击我的页面应该显跳转到登录界面，对于已经登录的用户一上来可能需要显示用户信息界面。

由于在多个页面中都要判断登录状态，所以在全局App.js中调用接口最合适不过了，把获取到的数据放在全局对象globalData属性中，别的页面可以通过getApp().globalData使用判断即可。

先在globalData自定义一个isLogin属性，当为true是登录成功，false是为未登录。再自定义一个user属性，放置用户的信息。

4、解决异步问题

下面是app.js 文件内容，globalPromise属性是为了解决异步问题。

// app.js

import {getUserInfo} from './api/user'



App({

  onLaunch() {

    // 每次进入页面，都去判断是否已经登陆

    this.globalData.loginPromise = getUserInfo().then(res=>{

      if (res.data.code==0) {

        console.log('已登陆');

        this.globalData.isLoagin = true,

        this.globalData.userInfo = res.data.data

      }else{

        console.log('未登录');

        this.globalData.isLoagin = false,

        this.globalData.userInfo = null

      }

    })

  },

  globalData: {

    userInfo: null,

    isLoagin:false,

    loginPromise:null

  }

})