本篇文章完成的需求:
1,登录采取弹出层的形式。
2,登录方式:
(1)手机号码+手机验证码(2)微信扫描(后文完成)3,无注册界面,第一次登录根据手机号判断系统是否存在,如果不存在则自动注册。
4,微信扫描登录成功必须绑定手机号码,即:第一次扫描成功后绑定手机号,以后登录扫描直接登录成功。
5,网关统一判断登录状态,如何需要登录,页面弹出登录层。
步骤1:搭建service-user用户模块 1.启动类&配置网关搭建service-user模块用来做用户登录,其中:
使用@EnableDiscoveryClient注解将服务注册到Nacos。
使用@EnableFeignClients(basePackages = "com.gql")注解开启远程服务调用。
使用@ComponentScan(basePackages = "com.gql")注解开启swagger扫描。
网关配置:由于项目使用Gateway作为网关,现在添加了用户模块,需要在gateway模块的配置文件中加上网关配置:
2.三层调用Controller层的login(@RequestBody LoginVo loginVo)方法调用了Service层的loginUser(LoginVo loginVo)方法,进而分别调用redisTemplate和baseMapper操作Redis和MySQL。
Controller层login(@RequestBody LoginVo loginVo)方法:
Service层loginUser(LoginVo loginVo) 方法:
步骤2:整合JWTJWT(Json Web Token)是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源。比如用在用户登录上。JWT最重要的作用就是对 token信息的防伪作用。
一个JWT是由三个部分组成:公共部分、私有部分、签名部分。这三者组合进行base64编码得到JWT。由于base64编码并不是加密,只是把明文信息变成了不可见的字符串。但是其实只要用一些工具就可以把base64编码解成明文,所以不要在JWT中放入涉及私密的信息。
整合JWT至common-util模块:版本已在yygh-parent父模块pom.xml添加
在common-util模块编写JwtHelper类:
步骤3: 搭建service-msm短信模块(整合阿里云短信) 1.启动类&配置网关搭建service-msm模块用来做短信登录,其中:
使用@EnableDiscoveryClient注解将服务注册到Nacos。
使用@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)注解取消数据源自动配置,因为发送短信不需要调用MySQL数据库。
使用@ComponentScan(basePackages = "com.gql")注解开启swagger扫描。
网关配置:由于项目使用Gateway作为网关,现在添加了短信模块,需要在gateway模块的配置文件中加上网关配置:
2.短信配置文件&读取配置类短信配置文件:在短信模块的properties中添加阿里云短信的regionId、accessKeyId、secret:
读取配置文件类:在配置类中读取配置文件内容:
3.生成验证码类此类中有生成4位数的验证码方法、6位数的验证码方法。
4.三层调用Controller层的sendCode(@PathVariable String phone) 方法直接调用redisTemplate获取生成的验证码,然后调用Service层的send(phone, code)方法通过阿里云发送手机验证码。
Service层发送手机验证码:
步骤4:登录页面前端 1.封装api请求创建api文件夹,创建/api/userInfo.js、/api/msm.js
2.添加登录组件登录成功后,我们需要把用户信息记录在cookie里面,所以在vscode的命令行执行:npm install js-cookie。
登录弹窗组件是一个公共层,因此我们把它放在头部组件里面,修改layouts/myheader.vue文件:具体代码点击这里查看仓库。
3.登录全局事件目前登录弹窗层在myheader组件中,登录按钮也在同一个组件里面,我们点击登录,调用showLogin()方法即可。
在预约挂号页面,选择科室去挂号时我们需要判断当前是否登录,如果登录可以进入下一个页面;如果没有登录需要显示登录层。我们可以注册一个全局登录事件,当需要登录层时,我们发送一个登录事件,头部监听登录事件,然后我们触发登录按钮的点击事件即可打开登录层。
头部注册和监听登录事件,修改myheader.vue组件:
①.引入vue
②注册与监听事件
预约挂号页面调整,修改/pages/hospital/_hoscode.vue组件:
①引入cookie
②修改方法
附加:用户认证与网关整合思路:
所有请求都会经过服务网关,服务网关对外暴露服务,在网关进行统一用户认证;既然要在网关进行用户认证,网关需要知道对哪些url进行认证,所以我们得对ur制定规则。Api接口异步请求的,我们采取url规则匹配,如:/api//auth/,凡是满足该规则的都必须用户认证。
因此,我们需要对server-gateway模块进行调整。
1.在服务网关添加fillter网站网关filter代码详见仓库。
2.调整前端代码请求服务器端接口时我们默认带上token,需要登录的接口如果没有token或者token过期,服务器端会返回208状态,然后发送登录事件打开登录弹出层登录。需要修改utils/request.js文件:
至此,已经将阿里云短信整合到项目中,更多关于分布式医疗挂号系统登录接口整合阿里云短信的资料请关注七叶笔记其它相关文章!