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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
layui自定义ajax左侧三级菜单
Jul 26 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获得文件扩展名三法
2006/11/25 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
简单了解Django项目应用创建过程
2020/07/06 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
造型师求职自荐信
2013/09/27 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
母亲节感恩寄语
2014/02/21 职场文书
学习经验交流会主持词
2014/04/01 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技