前端请求头加token，发送请求，单点登录(vue)-拦截器

后端，我已经写好了，

如果需要后端返回token，传送门

后端短信验证，传送门

后端防止，程序员恶意登录，进行ip封禁，传送门

后端拦截器，对无token的进行拦截，传送门

后端自定义异常，传送门

---

目录

前面干了啥？

1.创建请求拦截器

在vue的main.js中引入axios（基于vue-cli2脚手架创建的项目）

 请求拦截器代码

2.创建响应拦截器

响应拦截器代码

3.测试

---

思路：

使用vue【创建请求拦截器】，给所有的请求的请求头加token

【创建响应拦截器】，对所有后端返回，状态为500的错误（后端，我使用了自定义异常），进行拦截，并且显示问题，跳转重新登录。

前面干了啥？

我通过登录接口

 获取到了token,并且将token的数据存储在了localStore中

（在谷歌浏览器里，F12,Application菜单的Store中的localStore能够看到，后端传你的token，然后你通过localStore的set方法存储的token）

1.创建请求拦截器

在vue的main.js中引入axios（基于vue-cli2脚手架创建的项目）

 请求拦截器代码

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 判断是否存在token,如果存在将每个页面header添加token
  alert("请求拦截器成功")
  if (localStorage.getItem("token")) {
    config.headers.common['token'] = localStorage.getItem("token");
	alert("存在token加入请求头，请求头为"+JSON.stringify(config.headers))
  }
  return config
}, function (error) {//当前端有错误的时候，几乎不存在
  router.push('/login')
  return Promise.reject(error)
})

2.创建响应拦截器

响应拦截器代码

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
	
	// alert("响应拦截器成功拦截"+JSON.stringify(response))
	console.log(JSON.stringify(response))
	if(response.data["status"]==200){
		// 对响应数据做点什么
		return response
	}else{
		alert("响应拦截器【错误】"+response.data["msg"])
		return false
	}

})

3.测试

请求拦截器测试：当我有token

 

 

 响应拦截器测试: token正确时

无法验证，我还没有写其他接口和路由，不过拦截器已经没有问题了，token也加在请求头里了

响应拦截器测试：验证码错误时

 

 

参考文章：

Vue:全局拦截所有请求，并在请求头中添加token_道祖且长的博客-CSDN博客_vue怎么将token添加到请求头