微信授权的方法是,在项目里面配置拦截器(此处可以参考各个框架的拦截器)没有拦截器也可以,反正意思就是跳转到项目里的时候判断微信环境

如果是微信环境,

判断微信环境的方法是

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {

// 微信环境

}

此时处于没有登陆的状态或者需要微信授权的状态跳转微信授权链接

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {

// 微信环境

var redirect_uri = window.location.protocol + '//' + window.location.host + '/';
var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + WECHAT_APP_ID + "&redirect_uri=" + encodeURIComponent(redirect_uri, "UTF-8") + "&response_type=code&scope=snsapi_base&state=10#wechat_redirect"
window.location.href = url;

}

appid 是自己微信公众号的appid,redirect_uri是授权跳转的url,这个域名也要在微信公众号的后台配置授权安全域名,

比如redirect_uri是 http://www.eeeee.com/#/home,授权回来的url微信会带code,此处code是授权成功给的唯一识别码(用户后台查询用户openid)

此时URL是 http://www.eeeee.com/?code=3333333333#/home,因为前端框架的原因,之后页面跳转url只会改变#号后面的值,此处藏了很多坑,比如不能后面又加了code的参数,就会混淆,如http://www.eeeee.com/?code=3333333333#/home?code=44,微信分享也会遇到一些坑

我的一个解决方案是:

授权回来之后,无刷新改变url

var _url = window.location.protocol + '//' + window.location.host + '/#/home;
window.history.pushState({},0, _url)

这样url又变回授权前的样子(要在用过code之后)

目前感觉还是很好用的

url带#号,微信授权,微信分享那些坑的更多相关文章

  1. url带#号,微信支付那些坑

    现在前端很多框架的前端路由都带#号,主要为了做到无刷新跳转页面. 在微信公众号做微信支付时,配置的支付路径比如是http://www.eee.com/#/order,在调微信支付的方法时错误信息是'U ...

  2. 无需公众号PHP微信登录微信授权微信第三方登录微信开发php开发

    无论是个人还是公司,无需申请公众号,无需申请微信开放平台,即可实现手机网站和PC网站的微 信登录!!! 正常的微信登录是这样的: 1.手机版网站做微信登录,需要申请一个认证公众号,认证不仅需要公司营 ...

  3. 微信授权,openid 分享

    https://packagist.org/packages/fcode/wxshare

  4. window.location.search 为何在url 带# 号时获取不到 ?

    我们在获取url参数时,会常常用到截取参数 getUrlParam(name) { const reg = new RegExp('(^|&)' + name + '=([^&]*)( ...

  5. 微信授权登录(PHP)

    微信授权登录(PHP) 微信授权 OAuth2.0授权 微信网页授权 主要是在项目中遇到网页授权登录这个需求,就对此做些总结记录. OAuth2.0授权 OAuth是一个开放协议,允许用户让第三方应用 ...

  6. SPA单页应用前后分离微信授权

    项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...

  7. 你所误解的微信公众号开发、以及微信公众号网页授权、接收url跳转参数等问题

    前言:有一星期没跟新博客了,最近太忙.项目赶进度就没把时间花在博客上:今天来说说所谓的微信公众号开发和填坑记录: 微信公众号:运行在微信终端的应用 (对于开发者来说比较爽的你只需考虑兼容微信浏览器,因 ...

  8. [转] Android:微信授权登录与微信分享全解析

    https://wohugb.gitbooks.io/wechat/content/qrconnent/refresh_token.html http://blog.csdn.net/xiong_it ...

  9. NodeJs实现自定义分享功能,获取微信授权+用户信息

    最近公司搞了个转盘抽奖的运营活动,入口放在了微信公众号里,好久没碰过微信了,刚拾起来瞬间感觉有点懵逼....似乎把之前的坑又都重新踩了一遍,虽然过程曲折,不过好在顺利完成了,而且印象也更加深刻了,抽时 ...

随机推荐

  1. bzoj3157国王奇遇记(秦九韶算法+矩乘)&&bzoj233AC达成

    bz第233题,用一种233333333的做法过掉了(为啥我YY出一个算法来就是全网最慢的啊...) 题意:求sigma{(i^m)*(m^i),1<=i<=n},n<=10^9,m ...

  2. spring架构源码:

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...

  3. 1014: [JSOI2008]火星人prefix

    1014: [JSOI2008]火星人prefix Time Limit: 10 Sec Memory Limit: 162 MB Description 火星人最近研究了一种操作:求一个字串两个后缀 ...

  4. Web爬虫入门

    1.0示例学习:Web爬虫 public class WebCrawler { // 种子url private static String url = "http://www.cnblog ...

  5. Java 创建文件夹和文件,字符串写入文件,读取文件

    两个函数如下: TextToFile(..)函数:将字符串写入给定文本文件: createDir(..)函数:创建一个文件夹,有判别是否存在的功能. public void TextToFile(fi ...

  6. SharePoint "System.Data.SqlClient.SqlException (0x80131904): Parameter '@someColumn' was supplied multiple times.“

    最近在处理SharePoint Office365的相关开发的时候发现了这样一个奇怪的现象: 无法通过API更新Editor field,只要已更新就会throw Exception,由于是Offic ...

  7. 无法执行 FunctionImport“entitys.xx”,因为未将它映射到存储函数。EF

    EF突然报了一个这样的错误: 无法执行 FunctionImport"entitys.xx",因为未将它映射到存储函数.EF 其中xx是存储过程: 可能是因为我在.edmx文件中& ...

  8. 关于springMVC+Mybatis jar包详解

    1.Aopalliance.jar: 这个包是AOP联盟的API包,里面包含了针对面向切面的接口,通常spring等其它具备动态织入功能的框架依赖此包. 2.aspectjweaver-1.7.1.j ...

  9. 补发:用Meal Prep+模块化饮食来减肥之实操

    自从上次读到仰望尾迹云 老师的模块化饮食的帖子,再了解了一些Meal Prep的内容,结合着做Meal Prep健康餐至今已经快一个半月了.整体感觉还可以,所以在这里讲一下自己的心得体会. 分为三个部 ...

  10. spring boot开发入门

    最近学习了spring boot,刚刚入门,整理下