背景

vue-cli项目。路由是hash模式。需要授权的场景有:项目入口处(App.vue),指定页面(创建时、methods 方法内);可以携带参数

思路

由于hash模式# 号的存在,授权后链接会被扰乱。所以 我希望在 授权前 将重定向的链接 即 redirect_uri 改为没有# 的url。然后在 项目入口处 进行 url 重置,将其改回到 丑陋的 带#链接。

即:两步操作

1、授权前 将redirect_uri 改为没有# 的url

2、项目入口处,将没有#的url改回到 带#的url,跳到指定页面。

主要代码

1、授权前,redirect_uri 重置

这里会将当前页面的原有参数信息、额外参数、codepath参数 作为 redirect_uri 的新参数。其中codepath是 用来指定 跳转页面的,通常为 授权发起页。

/*** 开始设置页面链接,进行code 授权重定向** @param scope 授权作用域* @param path  授权所在页面 path* @param extraPm 额外参数,需要在 配置中 进行参数配置* @returns {string}*/get_codeV3(scope, path, extraPm={}) {if (process.env.NODE_ENV === 'development' && config.isMockWeChat)return '0713eFVW0AmFP12kGVTW0oGDVW03eFV2'let homeUrl = '', searchOb = {}, searchstr = ''let oriUrls = window.location.href.split('?')let baseShareURl = window.location.origin + window.location.pathnamehomeUrl = baseShareURlif (oriUrls.length > 1) {let searchUrls = oriUrls[1].split('#')let searchUrlReal = searchUrls[0]searchOb = qs.parse(searchUrlReal)let {code} = searchObif (code)delete searchOb.code}searchOb.codepath = pathObject.assign(searchOb, extraPm)searchstr = `?${qs.stringify(searchOb)}`homeUrl += searchstrlet redirect_uri = encodeURIComponent(homeUrl);let response_type = 'code';// 应用授权作用域,// snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),// snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )// 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节let state = '';let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=${response_type}&scope=${scope}&state=${state}#wechat_redirect`;window.location.href = url;}

2、链接前置判断

在项目入口处,发现有 codepath 参数,即 将该链接视为 授权后的redirect_uri 链接。进行页面重定向,跳转到 codepath 指定页面

/*** 页面重定向(授权)-确保页面链接正常* 支持多参、无参、指定页面  * code 在 返回的search 里* @returns {{needRedirect: boolean, homeUrl: string, search: {}}}*/urlResetForWxCode: function () {//需要重定向时:codepath 参数 与 code 参数同在。
let needRedirect = false, homeUrl = '', searchOb = {}, searchstr = ''let oriUrls = window.location.href.split('?')let baseShareURl = window.location.origin + window.location.pathnamehomeUrl = baseShareURlif (oriUrls.length > 1) {let searchUrls = oriUrls[1].split('#')let searchUrlReal = searchUrls[0]let searchObReal = {}searchOb = qs.parse(searchUrlReal)let { codepath } = searchObneedRedirect = codepathif (codepath) {config.platform.wxCode[codepath].forEach(item => searchObReal[item] = searchOb[item])if (config.platform.wxCode[codepath].length)searchstr = `?${qs.stringify(searchObReal)}`homeUrl += `#${codepath}` + (searchstr.length > 1 ? searchstr : '')}}return {needRedirect,homeUrl,search: searchOb}}

// 配置信息

config = {platform: {wxCode: {'/': ['hello', 'yiha'], '/spe': ['spp']}, // 微信授权-需要授权的页面: [页面用到的参数]  }}

使用

1、授权发起位置通常有 项目入口处、页面create 时,页面 指定方法内。

if (!storage.getToken()) {// code 授权标志 保存在localstorage。wx_jssdk.get_codeV3('snsapi_userinfo', '/')return}

2、项目入口处进行前置判断

// App.vue

created(){// 可以在项目入口处 进行code授权if (!storage.getToken()) {// code 授权标志 保存在localstorage。wx_jssdk.get_codeV3('snsapi_userinfo', '/')return}// 项目只要用到授权,则需要进行重定向判断。let {needRedirect, homeUrl, search} = browserUtil.urlResetForWxCode()if (needRedirect) {storage.setToken({code: search.code}) // 保存codewindow.location.href = homeUrl}}

写在最后

想着尽量能够做到配置化、可扩展,目前很low。凑合用吧?

配置化的体现:

链接前置判断方法内,组装链接参数时,我是只拿配置信息里的存在的参数。(方法里飘红的代码)。这是为了参数可控,避免不必要的bug。

可扩展的体现:

在redirect_uri 重置方法 参数里,有一个额外参数,原本 想着只截取授权发起页的原始search参数就好了。但一想 会不会有这样的使用场景:

表单提交页,在提交时 才去发起授权。这样的话 可能授权后 原表单信息已丢失,即需要重新再来;体验并不好。那么可不可以 将表单数据作为 授权时的一部分参数,然后在授权成功后,页面重新create时 检测到有表单数据时 直接提交。(当然,你也可以通过local保存数据来实现这个功能,或者其他)

注:该额外参数 也需要在配置里注明,不然 前置判断里 会不予理会。

转载于:https://www.cnblogs.com/fan-zha/p/11250549.html

vue hash模式下微信授权登录相关推荐

  1. Vue 移动端 hash模式下微信授权登录

    需求分析: 1.移动端微信公众号项目,需要获取微信授权进行登录 2.默认打开首页,在路由进入之前进行判断,有如下三种情况 3.本项目有两种账号类型:商家.企业,需在登录页进行选择 未授权过,跳到微信授 ...

  2. 解决vue路由hash模式下,微信网页授权问题

    解决vue路由hash模式下,微信网页授权问题 本人开发负责微信公众号端,菜单都是自定义菜单,然后每个菜单路径都是经过授权如:http://xxxx.com/ceshi/wechat/authoriz ...

  3. Vue 爬坑之旅 -- history 路由模式下微信分享爬坑总结

    现在做 H5 开发,微信平台基本是一个绕不过去的坑,这里面又分为微信授权和微信分享.说它坑,主要提现在以下几个方面: 文档不够清晰详细.开发文档这块是国内所有互联网公司的通病,文档写的不清不楚,长期不 ...

  4. 微信分享的链接,手机打开白屏,单页面应用(Hash模式下),实现微信分享

    前言:现在将相关的产品分享至朋友圈,进行宣传,成为一种很常见的方式.本文,主要想分享一下,微信分享所遇到的坑,微信分享的链接,手机打开白屏,以及产生的原因. 前端微信分享的基本步骤: 一.绑定域名 先 ...

  5. 微信授权登录mock(在没有真实微信账号的情况下测试大量微信账户授权登录的情况)...

    场景介绍 对于构建在微信公众号的系统,帐号体系往往使用微信授权登录(如各类微信商城应用系统). 这样操作不仅可以实现静默注册,对用户几乎是无感的,同时也达到了区分用户,获取用户基本信息(头像,昵称等) ...

  6. 微信hash ajax,基于vue hash模式微信分享#号的解决

    看代码吧~ // 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出 ...

  7. 微信h5登录php,vue实现微信授权登录步骤详解

    这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权 场景 app将商品分享到微信朋友圈或者分享给 ...

  8. VUE 实现公众号网页微信授权登录

    这里不做过多的解释,具体了解见官网文档. 网页授权官方文档 需要准备工作: 1.微信开发者工具 2.公众号添加开发者权限以及本地IP白名单 3.公众号唯一标识:appID 4.公众号配置网页授权域名 ...

  9. 关于微信公众号页面获取code进行微信授权登录

    关于微信公众号页面获取code进行微信授权登录 前言 提示:本文章为个人平时开发中的一些坑,对于新手可以耐心看一下,如果您感觉可以的话,请点个小星星再走吧,多谢了~~~ 提示:以下是本篇文章正文内容( ...

最新文章

  1. HDU-1978 How many ways 动态规划
  2. 0118——RTLabel和正则表达式
  3. 计算机视觉论文-2021-06-18
  4. (转)oracle表分区详解
  5. SQLite学习总结(1)——SQLite简介及快速入门
  6. R与Python手牵手:数据科学导论系列(包的载入)
  7. Django中Python3安装Crypto使用RSA
  8. java中什么是抽象类(abstract)
  9. MySQL中的float和decimal类型有什么区别
  10. html在线预览wordexcel文档,直接在线预览Word、Excel、TXT文件之ASP.NET
  11. 计算机与宽带路由的连接步骤,宽带拨号和设置路由器步骤【图】
  12. 文件截取\裁剪工具软件
  13. 死循环之----恐怖游轮
  14. Parallel ScavengeGC收集器
  15. VS2017下解决:error LNK2019: 无法解析的外部符号 __iob_func
  16. c语言gcc运行命令,c语言在gcc中怎么运行程序?
  17. 设计模式篇—《行为型设计模式》
  18. 【拓扑学知识】3.乘积空间与拓扑基
  19. 在VS2017下配置pylon头文件
  20. eclipse写python怎么样_eclipse python 使用教程(怎么用eclipse写python)

热门文章

  1. Office线上预览编辑解决方案对比
  2. 保持textarea滚动条在文尾
  3. Windows下好用到必须开机自启的小工具
  4. LONZA鲎试剂 内毒素检测试剂盒说明书(免费试用)
  5. TP5 百度AI身份证识别
  6. 爬取网站目录工具githack
  7. 国产CAD想说爱你,并不容易。
  8. 蓝桥杯题目训练Python
  9. VMware Workstation 虚拟机打开报错,与 Device/Credential Guard 不兼容。在禁用 Device/Credential Guard
  10. Java基础——函数(方法)