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

设置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;
}

代码007普通

打赏 收藏 海报 链接