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

2301_82243603

已于 2024-04-28 05:37:42 修改

阅读量87

点赞数 2

分类专栏：程序员文章标签： vue.js 前端 javascript

于 2024-04-28 05:37:41 首次发布

本文链接：https://blog.csdn.net/2301_82243603/article/details/138264808

版权

程序员专栏收录该内容

212 篇文章 0 订阅

订阅专栏

  // 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拦截器的区别**


#### 最后

-------------------------------------------------------------

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

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。



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