Vue微信项目按需授权登录策略实践思路详解


Posted in Javascript onMay 07, 2018

项目采用Vue作为开发框架,用户浏览页面时有两种情况:

  1. 一种是需要用户先登录之后才能继续浏览;
  2. 另一种是用户无需登录即可随意浏览。

在无需用户登录的页面中,可能包含需要用户信息的操作,此时就需要用户登录之后方能进行后续操作。因此,需要对授权登录策略进行区分。

思路

1.一般而言,我们为微信开发的H5页面,进入页面的时候就进行鉴权,要求用户登录之后才能继续浏览。但由于产品需求,这个项目我们需要对不同页面的鉴权策略进行划分,按照一般与特殊进行设计:

2.一般情况,用户进入页面第一时间要求用户授权登录,按照常规的微信授权登录流程,登录之后,用户继续浏览。

3.特殊情况,为无需用户登录的页面配置白名单,只要进入存在于白名单的路由,不进入检测用户登录状态的函数,直接渲染页面。

对于用户未登录状态下进行的需要用户信息的操作,按照我目前的理解,即使是基于微信的静默授权,页面也必须重新刷新,无法做到真正无感授权并且继续用户的操作。因此我选择在前端层面给用户更友好的提示,让用户了解授权过程,缺点是前一次操作仅仅是触发授权登陆,授权登录后,用户需要再次进行操作。

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因为授权登录涉及异步操作,因此使用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})
   })
}

本项目是在用户初次进行微信绑定时,就将用户的微信信息与本站的用户信息进行的绑定,因此在获取用户微信授权信息后,就可以获取到用户的token,从而获取用户在本站的其他用户信息。

在无需登录页面的进行需要权限的操作的处理

根据上面的逻辑,进入白名单之后,整个函数已经被return掉,不会进入下面的鉴权过程。但是如果是在此种页面上进行需要权限的操作,那么就需要触发授权登录流程,并且在授权之后,要一并获取用户信息。

// checkLogin.js
export function checkLogin({ redirectUrl, wxAuthLoading, wxAuthLoaded, callback } = {}) {
  if (getToken()) {
    // ...
    callback && callback()
  } else {
    // 提示用户正在授权中
    wxAuthLoading && wxAuthLoading()
    getWechatAuth( redirectUrl || window.location.href ).then( res => {
      // 授权完毕,提示用户授权成功
      wxAuthLoaded && wxAuthLoaded()
    })
  }
}

同时,我们需要对路由白名单添加一些操作

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因为授权登录涉及异步操作,因此使用promise,成功的回调中调用next函数
    new Promise((resolve, rejects) => {
      if ( whiteListRouter.indexOf(to.path) !== -1 ) {
        // 如果已经进行微信授权但是没有token值的,就调用以下函数获取token值
        if ( !hasToken() && hasAuthed() ) {
          getWechatUserInfo().then(res => {
            resolve()
          })
        }
        resolve()
        return
       }
      // 常规页面授权登录过程
      if (hasToken()) {
        // codes,获取用户信息并且跳转所需跳转的页面
      } else {
        // 判断用户是否已经进行微信授权
        if (hasAuthed()) {
          // 进行过微信授权之后,重定向回来的url中包含了微信的授权信息,可以将url上截取的参数发送到服务器,换取用户的token,随后进入上述有token时候的步骤
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用户尚未进行微信授权,则调用微信授权的方法,进行授权登录。
          getWechatAuth()
        }
      }
    }).then( res => {
      next()
    })
  })
  // other codes...
}

坑点以及不完善的地方

1.这个方案在用户授权之后,在路由跳转之前,一定要先获取用户信息,否则在url上的微信授权信息就会丢失,获取用户信息就会失败。

2.这个方案的缺点在于,需要开发者对在免登陆页面的所有需权限操作都加上checkLogin判断。由于这种需权限的操作一般都是发送异步请求,所以如果不考虑减少不必要的异步请求的情况下,可以统一在请求的方法上设置拦截器,判断后端返回的code,如果返回的是用户未登录的code,就进行微信授权。这种做法开发过程比较方便,但是会在用户未登录情况下发送了一些不必要的请求给后端,感觉不太好。

总结

以上所述是小编给大家介绍的Vue微信项目按需授权登录策略实践思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
详解angular element()方法使用
Apr 08 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
新版小程序登录授权的方法
Dec 12 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 #Javascript
node使用promise替代回调函数
May 07 #Javascript
node 使用 async 控制并发的方法
May 07 #Javascript
Angular 数据请求的实现方法
May 07 #Javascript
JavaScript数组去重算法实例小结
May 07 #Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 #Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 #Javascript
You might like
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
PHP实现懒加载的方法
2015/03/07 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP递归算法的简单实例
2019/02/28 PHP
php测试kafka项目示例
2020/02/06 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python之django母板页面的使用
2018/07/03 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
2014年党支部工作总结
2014/11/13 职场文书
初中信息技术教学计划
2015/01/22 职场文书
鼋头渚导游词
2015/02/05 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技