1. 需求
前几天客户反馈系统中当前时间是当前机子上的本地时间,并不是服务器上的当前时间。所以需要将当前本地时间从本地时间改为服务器上的当前时间。
2. 分析
造成这个问题的原因是因为js实在客户端浏览器上运行的,所以new.Date()
获取的是当前客户端的时间,并不是服务端时间。
首先需要解决的问题是获取服务器上的时间,这个可以让后台写个返回服务器时间的接口,也可以通过响应头Date
获取,前提是必须后台配置Access-Control-Expose-Header: 'Date'
返回Date
字段。
另一个问题是获取到服务器时间后,因为当前时间是不停的变化的,所以需要获取服务器当前时间和本机当前时间的差值,这个差值是永远不变的,得到当前本地时间对差值就值就可以得到服务器时间。
想了几种解决方案:
- 定义一个函数
getTime
代表当前服务器时间,把所有new Date()
获取的当前时间代码改为getTime()
。但是因为系统中代码量非常大,还包含其他库,从代码量和库上面考虑这样并不现实,可能改不全(比如Date.now
可能也要改),也影响了其他库的逻辑,所以不行。 - 如果当前时间只是在某个组件中使用,可以只修改这个组件中的代码,但项目太大我也不知道修改后对其他地方有没有影响,所以也不行。
- 最后我想
new Date()
是在window全局中定义的,可以继承window.Date
来改变。这个方法好像可以,只要使用new Date()
就改为服务器时间,有参数就走原来逻辑。
3. 实现
$axios.get('/getServerDate').then(res => {
let serverDate = new Date(res.data.date);
let difference = serverDate - new Date();
let temp = window.Date;
window.Date = function() {
if (arguments.length) {
return new temp(...arguments);
} else {
return new temp(difference + new temp().getTime());
}
}
window.Date.prototype = temp.prototype;
window.Date.parse = temp.parse;
window.Date.now = function() {
return Date().getTime();
};
})