js控制URL地址的改变，以微信服务号的授权获取用户的昵称和头像为例

当遇到某个场景需改变当前的URL的时候，有以下几种方法

window.location = "http://service.gaotianyue.com/moon/index.html?openid="+openid;
window.history.pushState({},0,'http://service.gaotianyue.com/moon/index.html?openid='+openid);
window.history.replaceState({},0,'http://service.gaotianyue.com/moon/index.html?openid='+openid);

第一种，是重定向，浏览器会求再次请求（例如微信内置浏览器读条两次）。按回退键会再次请求，总之需要按两次才能退出页面

第二种，URL地址静默变化了，没有重新请求，需要按两次退出页面，第一次回退是到URL变化之前的页面，不读条。第二次退出页面。

第三种（用这个），打开页面只读条一次，只是URL地址变化了 ，回退一次就退出页面。

应用场景，

比如某个活动，发给微信用户moon/index.html，用户打开地址后需要跳转到微信授权接口，腾讯回调到你的服务器，你的服务器通过，微信的接口，获得了openid,nickname,头像，然后让微信用户重定向到moon/index.html?openid=XXX，然后前端使用openid来通过ajax来获取昵称和头像。

这个流程有个小问题，用户每次打开moon/index.html的时候，进度条要读好几次（跳转到后台授权，跳转到腾讯授权，跳转到moon/index.html?openid=XXX,然后用openid请求昵称和头像）。

解决的方式是用本地存储记录openid

	var openid = s.getQuery("openid");
	if(!openid){//尝试从本地缓存中获取
    		if(localStorage.opid){
        		openid = localStorage.opid;
    		}else{
    			window.location = 'http://service.gaotianyue.com/moon/shouquan';
        		return;
    		}
   	}

但是这个活动，有个进一步的需求，当你分享出去后，要知道是谁分享给你的。

经过测试，分享出去的链接，再次打开后，会有个installedApp=0这个参数，这样的话，我们可以判断这个参数是否存在，

从打开别人的分享链接

moon/index.html?openid=YY&installedApp=0

然后层层授权后返回

moon/index.html?openid=XX&srcopenid=YY

这就要保证别人发过来的链接是moon/index.html?openid=YY而不是moon/index.html。

因此我们每次从本地存储取得自己的openid后，要改变自己的网页URL。这样分享出去带着自己的openid。

这里就用到了我们总结的更改URL地址的第三种方法。静默改变自己的URL，但是重新请求。而且打开别人分享过来的链接后，也可以判断本地存储，

从打开别人的分享链接

moon/index.html?openid=YY&installedApp=0

直接修改URL为

moon/index.html?openid=XX&srcopenid=YY

这样不用任何跳转就能知道此页面是从谁分享过来的，是谁打开的。

因为腾讯授权获取头像，需要3步，一步是和客户端跳转获取一个code传到你的后台，一步是获取token和openid,还有次是获取昵称和头像。每个接口140毫秒左右，加上你一开始请求后台来控制跳转，这3~4步比较费时，用户感觉你的微信在反复读条。所以本文的处理还是减少了不少开销。之后不管是打开别人的分享链接还是打开主页，都是

只有一次请求，读条一次。

另外静默改变URL后，你右击微信右上角的。。。选择copyURL,拷贝的是moon/index.html，而不是moon/index.html?openid=XX。这不影响我们的逻辑，而且也正好避免了用户用这种分享出去后暴露自己的信息的情况。

下面是示例代码。

服务器：

	@RequestMapping("/shouquan")
	public void sq(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		String code = req.getParameter("code");// 如果无此参数，但是有state参数说明用户没有授权
		String srcOpenid = req.getParameter("state");// 提前放在腾讯回调的参数,放的是发朋友圈者的openid
		LogCore.BASE.debug("code={},state={},code is null?{},state is null?{}", code, srcOpenid, null == code,null == srcOpenid);
		/** code非空说明是授权传腾讯后过来的 */
		if (Util.nonNull(code)) {
			String[] tokenOpenid = OauthManager.inst().getAccessTokenAndOpenid(Constant.DEFAULT_APP_ID,Constant.DEFAULT_APP_SECRET, code);
			String accTokn = tokenOpenid[0];
			String openidSq = tokenOpenid[1];// 授权后的自己的openid
			// 通过缓存实现减少授权请求
			String[] infos = MoonManager.inst().getNickNamePic(openidSq);
			if (Util.isEmpty(infos)) {// 缓存中没有
				String[] accProfile = OauthManager.inst().getAccountProfile(accTokn, openidSq);
				// 授权失败的情况[null, null, {"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: EMvfbA0407ns86 ]"}]
				String profileSq = accProfile[2];// 全部信息的json字符串
				if (profileSq.contains("errcode")) { // 静默授权获取用户信息失败
					shouquan(resp, SNSAPI_USERINFO, srcOpenid);// 强制授权
					LogCore.BASE.info("force the auth start!{}", openidSq);
					return;
				}
				MoonManager.inst().setNickNameAndPic(openidSq, accProfile);
			}else{
				LogCore.BASE.info("hit the cache success!openid={},nickname={}", openidSq, infos[0]);
			}
			if (Util.isEmpty(srcOpenid) || MoonManager.inst().isHasHelped(openidSq, srcOpenid)) {
				resp.sendRedirect(Util.format("/moon/index.html?openid={}", openidSq));
				return;
			}
			// 如果是分享过来的
			resp.sendRedirect(Util.format("/moon/index.html?openid={}&srcopenid={}", openidSq, srcOpenid));
			return;
		}
		/**以下说明是客户端请求的授权 */
		String openid = req.getParameter("openid");// 带此参数说明是客户端请求的，
		shouquan(resp, SNSAPI_BASE, openid);// openid可能为null,即用户点进空白页面后授权
	}
	/*以放在客户端*/
	private void shouquan(HttpServletResponse resp, String scope_, String stateP) {
		String redirect_uri = URLEncoder.encode(WECHAT_SIGNON_CALL_BACK_URL);
		String response_type = "code";
		String path = null;
		String url = null;
		if (Util.isEmpty(stateP) || "null".equals(stateP)) {// 防止客户端获取空的openid后请求授权
			path = "https://open.weixin.qq.com/connect/oauth2/authorize?appid={}&redirect_uri={}&response_type={}&scope={}#wechat_redirect";
			url = Util.format(path, Constant.DEFAULT_APP_ID, redirect_uri, response_type, scope_);
		} else {
			path = "https://open.weixin.qq.com/connect/oauth2/authorize?appid={}&redirect_uri={}&response_type={}&scope={}&state={}#wechat_redirect";
			url = Util.format(path, Constant.DEFAULT_APP_ID, redirect_uri, response_type, scope_, stateP);
		}
		try {
			resp.sendRedirect(url);
		} catch (IOException e) {
			LogCore.BASE.error("shouquan,scope={},", scope_, e);
		}
	}

前端代码;

window.onload = function() {
    var isappinstalled = s.getQuery("isappinstalled");
    var openid = s.getQuery("openid");
    var srcopenid = s.getQuery("srcopenid");
    //index.html?openid=XX&installedapp=0,说明是别人分享过来的,不过这时候仍可能之前保存有openid
    if(isappinstalled){
        if(localStorage.opid){
 		srcopenid = openid;
        	openid = localStorage.opid;
		window.history.replaceState({},0,'http://service.gaotianyue.com/moon/index.html?openid='+openid);
            
    	}else{
    		window.location = "http://service.gaotianyue.com/moon/signon?openid=" + openid;
        	return;
    	}
    }
    if(!openid){//尝试从本地缓存中获取
    	if(localStorage.opid){
        	openid = localStorage.opid;
		window.history.replaceState({},0,'http://service.gaotianyue.com/moon/index.html?openid='+openid);
    	}else{
		window.location = 'http://service.gaotianyue.com/moon/signon';
        	return;
    	}
    }
    if (openid == srcopenid) {
        srcopenid = null;
    };
}