请求拦截一般做什么操作?
第一:判断用户是否登录,没有登录的统一跳转到登录页面.
第二:判断用户是否具有权限,没有权限,提示权限不足.
...
每个项目可能做的处理不一样,看自己需求.
响应拦截有什么用?
因为后端每次响应都不一定是成功的,然后前端需要根据不同状态去做不同的处理,如果每个请求都去做处理,会多出很多重复的代码,并且显的很臃肿.
例如:后端返回资源不存在,token失效,权限不足,重定向等等
这样我们就可以直接在响应拦截中做一次处理,这样每个请求响应的时候都会经过这一逻辑,减少大量重复代码.看起来也更加美观.
下面上代码:
首先我们要在项目中找到main.js文件
然后引入axios
接下来就是添加拦截器了,首先是请求拦截
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 // 判断是否存在token,如果存在将每个页面header添加token if (sessionStorage.getItem("token")) { config.headers.common['Authorization'] = sessionStorage.getItem("token"); } return config }, function (error) { router.push('/login') return Promise.reject(error) })
至于需要在拦截之前做什么操作,就看自己需求了,以上是添加token的操作
下面的响应拦截,看需求,不需要可以不添加
// 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response }, function (error) { // 对响应错误做点什么 if (error.response) { switch (error.response.status) { case 401: store.commit('del_token') router.push('/login') } } return Promise.reject(error) })
好了,到处我们需要的拦截器就完成了,当然了,以上我们只是添加了,以及引入了axios,并没有挂载到vue,所以最后一步不要忘记哦
至此就完美结束了.