axios请求/响应拦截器配置自动携带token和自动提示错误

目录

通过请求拦截器设置自带token

基础信息

实现过程

响应拦截器配置提示错误

实现方法

---

简述一下，方便记忆：

通过请求拦截器设置自带token

意义：避免每次请求都去获取token，烦

角色token来判定用户登录状态、当前用户角色很很简单，就不赘述了，这里讲一下发送请求自带token的方式，

基础信息

基于vue和第三方框架开发的后台系统，角色权限不同的情况下增删改功能向后台发送请求都需要携带当前用户token，token值在登录时获取，退出时清除，这个很基础也不赘述了，此处我们就假定登录获取token后存在session里

扫描二维码关注公众号，回复： 14720941 查看本文章

那么在退出登录用户时，就要携带这个token，然后台判定退出的是哪个角色，退出方法代码如下

（清除数据那几行代码写在.then里就不用写async await了，我这里就是自己写着玩）

async logout() {
				await this.axios.post('/admin/logout',{},{token:true}).then(res=>{
				 
				})
				this.$store.state.user.user={}//清空vuex
				this.$store.state.user.token=false//清空vuex
				window.sessionStorage.clear() //清本地缓存
				this.$router.push({
					path: '/login'
				}) //回登录页
			},

这里axios我是用vueui直接装的，实现本blog说明的功能前未作修改

实现过程

根据上面代码，可以看到我并没有去session或者vuex里获取token，而是直接写了个true，就是请求的时候告诉拦截器：“我这个请求需要token”

那么我们就去plugin文件夹下axios页面配置一下请求拦截器

逻辑很简单：发送的请求数据有没有token，有就获取当前token配置进去

解决

_axios.interceptors.request.use(
	(config) => {
		// console.log(config);
		let token = window.sessionStorage.getItem('token')
		if (config.token) {
			config.headers.token = token
		}
		return config;
	},
	(error) => {
		return Promise.reject(error);
	}
);

响应拦截器配置提示错误

意义：没啥太大意义，就通过组件提示一下用户，没有响应你是因为那里出错了

实现方法

那么我们就去plugin文件夹下axios页面配置一下响应拦截器，

当然啊和后台商量好的返回数据里要有响应错误信息，没有就别写这个功能了

_axios.interceptors.response.use(
	function(response) {
		return response;
	},
	function(err) {
		//发送错误并显示错误
		if (err.response.data && err.response.data.errorCode) {
			Message.error(err.response.data.msg)
		}
		return Promise.reject(err);
	}
);