同源策略
含义
1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
协议相同
域名相同
端口相同
举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
1.2 目的
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？
很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。
由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。
1.3 限制范围
随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。
（1）Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM无法获得。
（3）AJAX 请求不能发送。
虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。
1.4 localStorage.clear()的限制
当两个网站符合同源策略，使用localStorage.clear()会将两个页面的localStorage全部清掉
解决办法：localStorage.setItem（“别名”）清除的时候localStorage.removeItem（“别名”）
1.5 ticket失效，再次登陆token无法替换
1、当ticket失效以后
2、needLogin=true，重新登陆，将缓存清除
3、进入判断逻辑
4、重新请求getUserInfoByTicketTmp（）方法
5、在这个方法里重新通过getSearchString()获取令牌
6、如果用户信息和token为空
7、调用getUserInfoByTicket（）方法
8、将用户信息存储到localStorage
9、获取用户信息，然后重新将App挂载到Vue
原因：失效以后，没有重新获取ticket，请求token，（登陆之后没有将缓存清除，导致调用获取ticket和token的方法进不去）
解决：登陆请求，如果需要needLogin，把浏览器缓存通过localStorage.removeItem（“别名”）清除指定缓存
1.6实施步骤
补充
Location hash 属性
定义和用法
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
语法
location.hash
获取ticket
拿到ticket去获取userInfo和token并且存到localStorage
如果没有用户信息重新调用异步函数getUserInfoByTicket（）获取信息并存储
重新将App挂载到Vue上
判断是否是登陆状态或者无权限
如果是的话将sessionStorage清除，清除指定localStorage.remove(“别名”)
// 如果localStorage为空，且有ticket，重新调用getUserInfoByTicketTmp()
网友评论