前(AngluarJS)后(Java)端分离微信授权

来源:互联网 发布:网络运行工作计划 编辑:程序博客网 时间:2024/06/04 00:40

简介

这是第一次前后端分离编写项目,后端使用的Java语言,框架使用的是SpringBoot框架,前端使用框架AngularJs。

最终的大致思路是

1、前端请求正常接口,进入拦截器,后台从Cookie中没取到值,返回54000给前端。2、由前端页面发起授权跳转(跳转到微信官方的那个授权接口)。3、用户点击同意后,跳转后台接口接收code。4、后端通过code获取用户的access_token和openid,然后获取用户信息,进行登录/注册,将JWT的token存入Cookie。5、进入前端页面,再次请求正常接口,因为Cookie中存在值,返回正常数据成功。

1.进入页面前端使用Ajax发送请求

2.后台拦截器拦截请求,先判断头部header中是否存在token,如果不存在则判断Cookie中是否存在token,如果token不为空并符合规则,返回true跳转真正请求的接口。最后没取到值判断接口是否加了注解,没有返回true结束挑战真正接口,加了注解返回false结束,response返回54000。

3.前端收到54000响应后,请求微信授权接口,其中redirect_uri为后台的接收code接口url,参数为前端页面链接和微信返回code(注意这个redirect_uri要UrlEncode转码)。

4.用户确认授权,微信回调跳转redirect_uri,后台根据code取用户的access_token和openid,然后获取用户信息,进行插入数据库,将用户信息JWT的token存入cookie,根据参数前端链接跳回前端页面。

5.进入前端页面,再次请求正常接口,因为Cookie中存在值,返回正常数据成功。

有点乱,明天画个流程图优化