web实践经验

web实践经验

1. 前后端分离

2. jwt token进行用户验证

3. 前后端使用json进行数据交流

{
"code":0,
"mgs":"success",
"data": {"token":"...."}
}

5. 约定code ==0 为业务正常情况，code !=0 需要Toast提示

6. 前端发送请求application/json

7. 后端接受参数@RequestBody

8. 前端针对fetch进行封装，判断http状态码，获取json数据，判断业务code

前端react

小技巧
通过navigator.userAgent判断是微信，android还是ios
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf(‘micromessenger’) != -1;
var isAndroid = ua.indexOf(‘android’) != -1;
var isIos = (ua.indexOf(‘iphone’) != -1) || (ua.indexOf(‘ipad’) != -1);
fetch异步http请求
前端把token存放到
window.localStorage或者window.sessionStorage中
通过document.title设置标题

后端 springboot

全局拦截器从token中获取用户信息，并存放到本地线程
@RequestBody controller参数
Response.ok().putData() controller返回值

微信公众号流程

（要注意这里其实是对公众号的授权，和使用微信作为授权登录是不同的，所以要注意微信开放平台与微信公众平台的区别）
微信的处理逻辑在于，当用户访问了微信指定的url后，微信把代表用户的code提供给第三方，第三方使用code换取用户的access_token
上面所说的指定的url就是

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

前端引导用户访问微信授权页面获取code

我方后端使用code换取access_token和open_id

微信小程序流程