0
点赞
收藏
分享

微信扫一扫

vue全局设置ajax请求拦截hookAJAX()

唯米天空 2022-04-13 阅读 75

设置Cookie进行统一拦截,使全局都携带Cookie,便于系统中权限的控制展示。

在系统的main.js文件中设置:

其中this.setRequestHeader的Authorization为cookie中存储的token。

在cookie中存储token的具体方法详见:vue在Cookie和对localStorage的封装中存储登录用户的token、用户名等信息_刚刚好ā的博客-CSDN博客

/*全局设置ajax请求拦截*/
hookAJAX()
function hookAJAX () {
	XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototype.open;
	var customizeOpen = function (method, url, async, user, password) {
		// do something

			console.log(method, url, async, user, password);
			let cookie = localStorage.getItem('userToken')
			this.nativeOpen(method, url, async, user, password);
			this.setRequestHeader("Authorization", cookie);
		}


	};

	XMLHttpRequest.prototype.open = customizeOpen;
}

由于系统中有些内容需做权限展示,即获取token,而在这里是先统一全局加入token,故会出现Refused to set unsafe header "Cookie"这一错误,且总是跳转至登录页面。解决办法为过滤到需要做权限的token的url,代码如下:

/*全局设置ajax请求拦截*/
hookAJAX()
function hookAJAX () {
	XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototype.open;
	var customizeOpen = function (method, url, async, user, password) {
		// do something

		if (url.indexOf('dologin') !== -1 || url.indexOf('localhost') !== -1 || url.indexOf('videoApplication') !== -1 || url.indexOf('smartcity') !== -1) {
			this.nativeOpen(method, url, async, user, password);
		} else {
			console.log(method, url, async, user, password);
			let cookie = localStorage.getItem('userToken')
			this.nativeOpen(method, url, async, user, password);
			this.setRequestHeader("Authorization", cookie);
		}


	};

	XMLHttpRequest.prototype.open = customizeOpen;
}
举报

相关推荐

0 条评论