发布时间:2023-04-02 08:00
后端,我已经写好了,
如果需要后端返回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)
// 添加请求拦截器
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)
})
// 添加响应拦截器
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
}
})
请求拦截器测试:当我有token
响应拦截器测试: token正确时
无法验证,我还没有写其他接口和路由,不过拦截器已经没有问题了,token也加在请求头里了
响应拦截器测试:验证码错误时
参考文章:
Vue:全局拦截所有请求,并在请求头中添加token_道祖且长的博客-CSDN博客_vue怎么将token添加到请求头