15、微信小程序登录详解

1、登录流程

1、获取临时登陆凭证 code （code —— 限频接口），wx.login()

2、前端向服务器发送 ajax 请求（ wx.request() ），该请求需要携带三个参数：code、appid、appsecret，目的是获取唯一标识符 token，在api 文件夹下新建 login.js

3、前后端交互

        3.1  对于一个新用户，程序内部没有可提供的 appsecret，用户需先注册才能获得appsecret

        3.2  用户登录，此时程序内部将只需传入 code appid两个参数，同时服务器发送内部请求，将根据用户传入的 appid 来找相应的appsecret

        3.3  用户根据 code appid appsecret 实现登录

4、前端将用户唯一标识符 token 保存在本地，此后所有个人相关的业务都需要用到 token，若没有token，则需要跳转到 登陆页面获取

  

 api——request.js

import baseUrl from './baseUrl'
function request(config) {
    return new Promise((resolve, reject) => {
        wx.request({
            url: baseUrl + config.url,
            timeout: 5000,
            method: config.method,

            //   在微信小程序中，get、post、delete、put 传参都是 data
            data: config.data, //如果需要传参
            success(res) {
                resolve(res)
            },
            fail(error) {
                console.log('error=>', error);
                reject(error)
            }
        })
    })

}

export default request

api——login.js

//  写接口
import request from './request'

function doLogin(data) {
    return request({
        url: '',  //登录接口
        method: 'get',
        data
    })
}

export const register=(data)=>{
    return request({
        url:'',     //注册接口
        method:"get",
        data
    })
}
export {
    doLogin
}

api——baseUrl.js

export default 'http://www……'  //导出域名

wxLogin——index.wxml

<button type="primary" bindtap="login">登录</button>
<button type="default" class="register" bindtap="register">注册</button>

wxLogin——index.js

import { doLogin, register as registerApi } from '../../api/login'

Page({
    data: {},
    /*    登录流程：
       1、获取临时登陆凭证（code码 ） —— 限频接口
       2、 发送 ajax 请求，该请求需要携带 APPID APPsecret code，目的是获取用户唯一标识符
            在 api 文件夹下新建 login.js
       3、前后端交互
       3.1 对于一个新用户，程序内部没有提供现成可用的 APPsecret ，用户需要先注册（appid、appsecret）才能拿到 APPsecret
       3.2 用户登录，此时程序内部将只需传入 code appid两个参数，同时服务器发送内部请求，将根据用户传入的 appid 来找相应的appsecret
       3.3  然后根据 code appid appsecret 实现用户登录效果
       4、将用户唯一标识符 token 保存在本地
       此后所有与个人相关的业务都需要携带 token，若没有token，则需要跳转到登录页面，使之携带token
       5、前端通过 wx.request() 发起业务请求
    */

    // 登录
    login() {
        wx.login({
            success: res => {
                console.log(res);
                let code = res.code
                // 获取用户唯一标识符
                doLogin({
                    // 接口对应的文档中要求传递的参数 code、appid，但实际需要参数有三个 
                    code, //临时登陆凭证
                    appid: ''//在小程序后台的“开发管理——开发设置——APPID（小程序ID）”拿
                }).then(res2 => {
                    console.log(res2);
                    // 将用户唯一标识符 token 保存在本地
                    wx.setStorageSync('token', res2.data.id)
                })
            }
        })
    },

    // 注册
    register() {
        registerApi({
            appId: '',//在小程序后台的“开发管理——开发设置——APPID（小程序ID）”拿
            appSecret: '',  //小程序密钥
        }).then(res3 => {
            console.log(res3);
        })
    },


})