大佬教程收集整理的这篇文章主要介绍了Vue微信项目按需授权登录策略实践思路详解,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在无需用户登录的页面中,可能包含需要用户信息的操作,此时就需要用户登录之后方能进行后续操作。因此,需要对授权登录策略进行区分。
1.一般而言,我们为微信开发的H5页面,进入页面的时候就进行鉴权,要求用户登录之后才能继续浏览。但由于产品需求,这个项目我们需要对不同页面的鉴权策略进行划分,按照一般与特殊进行设计:
2.一般情况,用户进入页面第一时间要求用户授权登录,按照常规的微信授权登录流程,登录之后,用户继续浏览。
3.特殊情况,为无需用户登录的页面配置白名单,只要进入存在于白名单的路由,不进入检测用户登录状态的函数,直接渲染页面。
对于用户未登录状态下进行的需要用户信息的操作,按照我目前的理解,即使是基于微信的静默授权,页面也必须重新刷新,无法做到真正无感授权并且继续用户的操作。因此我选择在前端层面给用户更友好的提示,让用户了解授权过程,缺点是前一次操作仅仅是触发授权登陆,授权登录后,用户需要再次进行操作。
{ // 因为授权登录涉及异步操作,因此使用promise,成功的回调中调用next函数 new Promise((resolve,rejects) => { if ( whiteListRouter.indexOf(to.path) !== -1 ) { resolve() return } // 常规页面授权登录过程 if (hasToken()) { // codes,获取用户信息并且跳转所需跳转的页面 } else { // 判断用户是否已经进行微信授权 if (hasAuthed()) { // 进行过微信授权之后,重定向回来的url中包含了微信的授权信息,可以将url上截取的参数发送到服务器,换取用户的token,随后进入上述有token时候的步骤 getWechatUserInfo().then(res => { resolve() }) } else { // 用户尚未进行微信授权,则调用微信授权的方法,进行授权登录。 getWechatAuth() } } }).then( res => { next() }) }) router.afterEach(( to,from ) => { wxShare({ title: to.Meta.title,desc: to.Meta.shareDesc,link: to.Meta.shareLink,logo: to.Meta.sharelogo}) }) }
以上是大佬教程为你收集整理的Vue微信项目按需授权登录策略实践思路详解全部内容,希望文章能够帮你解决Vue微信项目按需授权登录策略实践思路详解所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。