前言

在小程序的开发中，登录需求是我们常常遇见的，但是你清楚他的全流程吗，企业降本增效，以前分前端和后端，作为一个前端来说，或许以前你只需要了解前端怎么来处理就好了，但是这真的对你个人的发展有好处吗？并不，我不是说希望每个人都去做全栈开发，我的意思是你要了解全流程，怎么实现的，如果让你自己去搭建能不能搞定。你知道不做和你不知道不会做是两个概念。

主题

为什么很多企业要求后端去学前端？因为现在前端的工程化逐渐成熟，后端即使在不用特别深入了解的情况下也可以去干前端的活，为什么？因为后端了解这个事情的全流程，我写这篇文章的作用就是如果你是一名前端开发的话，也要去养成这种思维，有大局观和全流程的思路，不要停留在我是前端，我就干我前端一亩三分地的活。

好了，现在你就是一名独立开发者了，什么前端后端？这个事情交给你了，你需要思考怎么完整的把他解决，给出你的方案来。
第一步: 来到官方文档，获取关键信息:

第二步: 直呼好家伙，文档告诉你前端怎么分工，后端怎么分工了吗？默认就是要让你了解整个登录的流程，来吧，东西很简单，别上来就给自己画个圈限定住了，我是前端我只需要怎么怎么样就可以了，你要把你这种思想给我彻底的消灭掉。

看到这个流程图，先明确主体，你需要关注三个部分小程序端、开发者服务器端、微信接口服务端,需要围绕这三个部分的交互，才能完成我们的登录。
小程序端需要先通过两个步骤操作code，与服务器端进行交互,继续锁定文档wx.login部分:

根据示例代码，可知我们可以通过该方法获取我们需要用到的code，封装我们的前端代码:

js 复制代码

export function getCode(){
    return new Promise((resolve,reject)=>{
        wx.login({
            success(res){
                resolve(code)
            }
        })
    })
}

写到这儿，可能有同学要问了，示例代码写的好好的为什么你要封装？首先示例代码有没有问题？没有问题，但是为什么我们要封装？为了减少回调地狱，你既然学过es6，也学过promise，也学过模块化开发，为什么不用起来呢？

js 复制代码

async handleLogin(){
    await code = await getCode()
    wx.request({
        //将code作为参数传递给后端
    })
}

这样代码在结构上是不是清晰了很多呢？ok，到了这一步是code此时通过请求传递给了开发者服务器，我们继续看流程图，开发者服务器需要通过appid appsecret 以及我们从前端请求获取到的code这三个参数去请求微信接口服务，微信接口服务会返回给我们session_key以及openid。appid以及appsecret这两个是我们从官网我们要开发的小程序的位置获取到的。分析完毕我们再次来到文档:

第三步： 我们知道了开发者请求微信接口服务的地址以及所需的参数，进行后端的开发:

编写我们所需的实体类，在controller层去处理我们的接口，service层来编写具体的业务，通过后端的方法，将url以及三个参数组装好去发送请求，并将返回给后端的结果存入数据库，通过加密生成token，并将token缓存到redis里。
第四步： 将token返回给前端，前端将token存到storage里面，这样每次发起请求的时候在header里带上token，后端再去通过这个token去验证是否过期即可啦。

尾声

说到这里，整个的登录流程你应该有了一定的了解，不管你是用原生小程序开发也好，用框架去开发也好，万变不离其宗，因为此次小程序后端打算用java来做，后续我会对服务端的代码进行补充，如果此文对你有帮助请给我一个免费的一键三连。

聊一聊微信小程序的登录

前言

主题

尾声