vue与react构建的项目关于社交登录的建议

vue与react构建的项目关于社交登录的建议


在微信小程序中阅读

在如今前后端分离的时代,vue与react几乎占领了整个前端市场。

做网站前台的时候,不可避免的问题,用户先以访客身份访问网站,在满足一定条件后才会触发登录。

对于触发登录来说,比较常用的一种方案,触发登录后直接将路由push到登录页面,并通过携带参数或者缓存登录前的路由信息的方式,在登录成功后,回到登录前的页面。

方案是没问题的,但不可避免有了一些登录前的状态维护问题。从登录页面成功后再推回登录前页面,页面是需要重新渲染,自然就丢失了页面上的一些状态。当然,有一种方案,例如vue的keep-alive,缓存页面,避免渲染。

不过,一般的网站都会加入来自第三方社交平台的账户登录功能。而按照普遍的OAuth2授权来说,网页是需要跳转到第三方社交平台的,然后在用户授权完成后,回到网站上。这个时候,基本上就丢失了登录前的路由信息。

所以推荐vue和react构建的前台网站,使用iframe框架的方式进行社交登录。

流程:

1、满足触发登录,激活登录弹窗,在window中声明一个回调函数;

2、用户选择社交登录,进行社交登录交互流程;

3、社交登录回调至指定页面;

4、回调页面判断是否存在父级页面,调用回调函数;

5、回调函数关闭登录弹窗,并借用vue和react的特性,获取用户资料,更新组件,完成登录。


上面的建议是主要针对PC端的意见;


但对于移动端来说,就不适用了。

移动端还是需要路由push到登录页面,然后针对不同环境处理不同的社交登录。

例如微信登录,这朵“奇葩”,在非微信中打开,移动是实现了不了登录。

而移动端整体的登录后处理,是需要考虑针对打开场景的不同,是否使用登录前缓存的路由。