vue拦截器

vue 前端拦截器

初始化钩子函数是store下的index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state:{
		user:{
			username:window.IocaISto
		},
		mutations:{
			login(state,user){
			state.user=user
			window.IocalStorage.setIt
			}
		}
	}
})

在main.js文件里面，要开启路由的前置判断函数，并在new Vue中引用

router.beforeEach((to,from,next)=>{
	if (to.meta.requireAuth){
	console.log('进入')
	if(store.state.user.username!=''){
		console.log(store.state.user)
			nest()
		})
	}else{
	console.log('弹出)
	next({
		path:'login',
		query:{redirect:to.fullPath}
		})
	}
}else{
	next()
	}
}
)
new Vue({
	el: ’#app‘,
	remder: h=>h(app)
	router,
	#注意这里
	store,
	components:{App}
	template:'<App/>'
})

这个是写在router里面

meta:{
	requireAuth:true
}

如

{
	path:'/home',
	name:'Home',
	component:Home,
	meta:{
		requireAuth:true //是否需要拦截
	}
}，

vue axios拦截器分为几类

1.请求拦截器

·请求拦截器的作用是在请求发送前进进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

2 响应拦截器

· 响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效需要重新登录的时候，跳转到登录页面

3. 移除拦截器

var myInterceptor = axios .interceptors.request.use(function() {/*...*/});
axios.interceptors.request.eject(myInterceptor);

4. 为axios 实列添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function() {/*...*/});

原文地址：
链接: link.