axios的请求拦截和vue路由的导航守卫有什么区别_路由守卫和axios拦截区别(3)

  // to:目标路由
  // from:源路由
  // next:下一步的操作，就是用户当前需要进行的操作
  console.log(to);
  // console.log(from);
  // 判断当前用户是否登陆，如果登陆了则可以跳转，否则重定向到登陆页
  // 获取用户登陆之后的token，进行token的判断
  if (to.path !== '/login' || to.path !== '/register') { // 非登录页面验证是否存在token
    let token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      Toast('请先登陆')
      // 说明没有登陆，则重定向到登陆页
      next({ name: 'login' })
    }
  } else {
    next()
  }
})

### **2. axios拦截器：拦截后端接口**


* 每次发送请求之前判断vuex或者本地存储中是否存在token
* 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
* 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

// 添加请求拦截器
// 每一个我们自己封装的axios请求都会经过这个拦截器
axios.interceptors.request.use(function (config) {
    console.log(config)
    // 在发送请求之前做些什么:我要看看有没有token,如果有，则以请求头的方式进行传递
    let token = localStorage.getItem('token')
    if (token) {
      // 设置请求头
      config.headers.Authorization = token
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

### **3. 导航守卫和axios拦截器的区别**




### 总结

* 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

* 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

* 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

* 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/6c250b6200355d0edce85b970db267bd.png)

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！