上次聊了如何将之前基于http session的短信验证码登录改造为基于JWT的短信验证码登录。本次就让前端页面打通到上次实现的服务。类似的功能之前也聊过，编程久了难免会需要不断地重复，这就是程序员的日常工作。如果能从重复中变得熟练，或者从重复中学到新知识点，那就是赚到。今日的内容主要包含如下几步： 首先将上次实现的基于JWT的短信验证码dubbo服务注册到网关。让前端页面可以通过网关实现http协议调用到dubbo服务。上次实现的服务信息如下在网关后台中，新增服务，将上次的接口信息录入，点击OK。这样服务就注册成功了。新增后，点击调试按钮，可以对服务进行调试。我随便输入了一个号码和验证码，点击Debug按钮，可以看到接口返回。就算验证通过了。忘记了注册时的手机号，就不验证正常场景了，在前端代码写完后再验证。这里我只要保证网关能调用到dubbo服务就好。 首先要定位到需要修改的前端代码，我通过之前的方法名smsLogin进行搜索，可以看到短信验证码登录的前端代码在user.js和SmsCaptchaLogin.vue这2个文件里。 首先修改接口部分，打开user.js可以看到之前的调用方式和上次一样，前端应用我用cursor帮我修改下，输入如下需求描述由于这个需求是我从上一个logout的描述里复制出来的，缺少了参数。cursor会帮我失败出了这个问题，于是我停止了任务。我手动根据cursor给的代码，覆盖了之前的代码。然后在输入框中输入可以继续的命令看起来没啥问题，接下来就进行前端到后端的端到端功能测试。 打开Fudy Shop的登录页面，输入之前注册的手机号（不是真实存在的，不是我的手机号），点击发送验证码记得4年前写这个功能的时候，因为网站还未上线，为了节省短信成本，秉承着能不花钱就不花钱的原则。我将手机短信的验证码临时替换为了在控制台上打印出来。如下图所示登录成功了，从浏览器的开发者控制台上可以看到登录的过程中已经调用了刚才注册在网关中的服务。
