关于响应拦截的错误处理问题

来源：8-6 产品站交互实现

jaymie

2020-01-29

老师您好，之前在main.js里只是单独对首页进行了一个处理，当响应未登录的时候不要重定向到登录页面。但是在实际产品中，会有许许多多的页面都是不需要进行登录就可以访问的。比如说商品介绍页，商品详情页。

// 接口响应拦截器
axios.interceptors.response.use(function(response){
  let res = response.data;
  // 获取hash路由
  let path = location.hash;
  if(res.status == 0) {
    return res.data;
  // 10表示未登录的状态，重定向到登录页面
  } else if (res.status == 10) {
    if (path != '#/index') {
      window.location.href = '/#/login';
    }

我能想到的方案就是定义一个不需要登录可以访问的路由的列表。然后在这里进行判断是否在这个路由列表里。如果不在这个列表里，就需要重定向到首页。
但是这个方案会有问题，因为在页面和接口是关联关系，比如说在首页，某几个接口是不需要登录就可以请求的，但是首页的某些按钮请求的接口却是需要登录的。这种需要怎么去处理？
以及对于这种问题是否有更好的系统性的解决方案

写回答

1回答

河畔一角

2020-01-29

已采纳

这个有几个方案提供给你：
1.路由定义元数据，来整个页面做登录限制。（有局限）
2.再次封装axios，针对每一个接口做登录限制，如果不需要登录，那么传一个默认参数进去，在返回的时候不做登录限制。
3.项目自身提前做好登录存储，如果没有登录，就不要调用需要登录的接口，课程后面会讲。
4.首页本身不需登录，但是点击某个按钮需要登录，这个可以结合第三点，提前拦住需要登录的接口，另外需要封装一个方法，在点击按钮的时候直接调用公共机制，在公共机制里面判断是否登录，如果需要直接跳转，这个针对页面中局部按钮需要登录的情况。