从URL中获取参数后，修改URL，并且不跳转页面

---

前言

• 需求：通过统一认证登录页面跳转过来，会通过URL的形式携带Token，需要从URL中获取到Token并存储到本地。
• 问题：由于使用Hash的路由模式，会在原始URL的末尾拼接"/#/"，导致也一直被展示在URL上，十分不美观。
• 方案：通过history.replaceState的方式修改URL，不会产生页面跳转的问题。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、从URL中获取数据并存入缓存

const urlParams = parseQueryString(window.location.href)
// URL转对象
function parseQueryString (url) {
	const urlKey = url.split('?')[1]
	const objKeyValue = {}
	if (!urlKey) return objKeyValue
	const urlObj = urlKey.split('&')
	for (let i = 0; i < urlObj.length; i++) {
		objKeyValue[urlObj[i].split('=')[0]] = decodeURI(urlObj[i].split('=')[1])
	}
	return objKeyValue
}
// 如果存在则存入缓存
if (urlParams.id_token) localStorage.setItem(id_token, urlParams.id_token)

二、使用replaceState修改URL路径

history.replaceState(null, null, window.location.href.split('?')[0])

三、关于history.replaceState

官方文档

参数	描述
data	这会作为 onpopstate事件的 state 属性返回。(状态对象是一个 JavaScript 对象，它与传递给 replaceState 方法的历史记录实体相关联)
title	大部分浏览器忽略这个参数, 将来可能有用。在此处传递空字符串应该可以防止将来对方法的更改。
url	历史记录实体的 URL. 新的 URL 跟当前的 URL 必须是同源; 否则 replaceState 抛出一个异常。

举例说明适用场景
假设当前URL路径为http://baidu.com

更改的URL	状态
baidu.com/foo	成功
http://baidu.com/foo	成功
/foo	成功
Foo?query	成功
/foo#somedata	成功
https://developer.mozilla.org/	错误
http://https://developer.mozilla.org/zh-CN	错误