拦截器的作用
哈喽，Vue网站上那个$http.interceptors功能真的挺酷的。你可以在请求前后搞些手脚，比如说给每个请求带上自己的 token，没权限时它也能自如应对，这不就能省心不少。而且它还能帮你轻松地扩展项目！
Vue.http.interceptors.push(function(request, next){
request.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'));
next(function (response) {
if(response.status === 401){
localStorage.removeItem('token');
this.$router.push('/login');
}
});
});
小伙伴们看过来！想用好$http.interceptors的功能，得在Vue实例里加点儿代码~一般我会把它放到主要的main.js文件里，这么一来所有的项目都能享受到这个好处了。
Authorization字段处理
写代码时候老得加个Authorization验证登录信息是不是?别担心，小事一桩!咱们就用这个$http.interceptors拦截器来搞定，把Authorization改成token就好了。接着就是拦截请求，搞定收工!
服务器说你没权限，那就是要用拦截器解决呗！先把过去的令牌扔了，接着网页调回登录页。这样既保证账户安全，也提示大家快重登换新的
注意请求头格式
记住，用$http.interceptors做拦截时，千万仔细检查请求头的格式接口通信得靠这个，每个接口都有自己的规则。所以，别搞乱或放些看不懂的符号了~
别忘了，只要加上双引号，就能在请求头上处理特殊字符的问题，这样，我们发送出去的各项信息就可以准确无误地传输了！
解决“Error: Invalid token”错误
var headers = {
"Content-Type": 'application/json;charset=UTF-8',
"Authorization": 'Bearer ' + localStorage.getItem('token')
};
出错提示“无效令牌”？别怕，常常是你用的那张令牌出岔子。放心，应对它的办法还是挺多滴！
首先试着使用 decodeURIComponent()处理那些特殊字符就行！然后，如果想让每个请求都自动加上 token 的话，就得搞个$http.interceptors 拦截器。别忘了检查下请求头有没有问题，发请求的时候千万别带上非法字符或者格式错误哟~
调试技巧与开发经验
犯个小错很正常哒，别担心。比如弹出“错误：无效令牌”这类信息时，想想哪儿出错了就好。另外，除此之外，你还可以试试浏览器里面那个叫“开发者工具”的东西，看看网络连接稳不稳，接口跑得顺不顺畅！
写代码，多注意接口和参数规格，搞清楚啥意思就行。万一出错也别慌，把错误消息抄下来，找出问题所在，慢慢提高技能，项目自然就能做得棒极了！
总结与展望
今天咱们就聊聊怎么玩转Vue里的$http.interceptors这个东西。就像看门老大爷似的，盯着你发出的请求和收到的响应。你是不是总觉得加个Authorization字段，处理401没权限这些事很麻烦？现在有了它，省心多了！而且连那烦人的“错误：无效token”都能解决~
吸取这次的教训，下次新的项目就不会再犯错！多积累些实战经验，增加新知识，让自己变得更强，这样才能适应这个变化飞快的技术和项目世界！
评论0