vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别

在Vue项目中，有两种用户登录状态判断并处理的情况，分别为：导航守卫和axios拦截器。

1. 导航守卫：拦截组件

导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过，如果登陆过，则可以跳转，否则重定向到登录页面
导航守卫只是前端做出判断，检查请求头中是否带有token，并不能判断token是否失效
每个守卫方法接收三个参数：
- to: Route: 即将要进入的目标路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
- `next(false)`: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
- next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
- ps: 一定要确保要调用next

    // 添加路由守卫--导航守卫// 作用是通过判断来决定当前的路由跳转到底能不能进行// 这种守卫，只要进行路由的跳转就会自动的触发，不能人为调用router.beforeEach((to, from, next) => {// to:目标路由// from:源路由// next:下一步的操作，就是用户当前需要进行的操作console.log(to);// console.log(from);// 判断当前用户是否登陆，如果登陆了则可以跳转，否则重定向到登陆页// 获取用户登陆之后的token，进行token的判断if (to.path !== '/login' || to.path !== '/register') { // 非登录页面验证是否存在tokenlet 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拦截器的区别

导航守卫就是路由守卫，想进入一个页面时，判断是否有权限访问(有token，就有权限，没有就返回)，但并不能判断是否失效。
axios拦截器是发送请求判断token的有效性，如果有就将token放在请求头里。
导航守卫和axios拦截器一起使用，进而来确保登录的状态

千锋HTML5学院：如何讲清楚函数防抖？zhuanlan.zhihu.com

千锋HTML5学院：如何讲清楚函数节流？zhuanlan.zhihu.com

千锋HTML5学院：如何讲清楚闭包？zhuanlan.zhihu.com

vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别相关推荐

解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
uni-app vue axios跨域访问问题
uni-app vue axios跨域访问问题为了解决这个axios跨域访问报错问题,查了很多资料,最终还是解决了,特此在这里记录下方法. main.js import axios from 'st ...
vue axios 跨域_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合前端代码 KwgcFooter.vue 页面底部 KwgcHeader.vue 页面头部 KwgcLogin.vue 用户名: 密码: 登录登录验证情况: kwgcHeader.vue 这 ...
【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决
前后端对接必出bug,最近连续对接了两个项目,对解决跨域有点感觉了,跟大家分享一下经验,都是血的教训- 两个项目都是Springboot+Vue(axios网络请求).本人主要负责前端,所以前端会分享 ...
vue axios跨域问题
vue3为例: [vue.config.js]文件,目录里面没有的话需要真机创建代理的它通俗意思:我这里设置api意思就是在遇到于/api开始的接口的时候,间本地地址转化为接口地址如:http:/ ...
vue axios跨域 Request Method: OPTIONS问题
今天做跨域登录功能遇到这个问题(后端已做跨域处理): 当跨域请求为post时候,请求的method变为了options. 在这里插入图片描述其实跨域分为简单跨域请求和复杂跨域请求: 简单跨域请求是 ...
uni-app H5跨域问题解决方案（CORS、Cross-Origin） VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is pres
原来不同服务器框架要用不同的跨域配置,比如我用的是tomcat就用的是下面这个教程: https://blog.csdn.net/pk694046220/article/details/1038371 ...
vue axios 跨域配置
devServer: {disableHostCheck: true,host:'http://127.0.0.1',// 前端地址port:'8020',proxy: {'/api':{target ...
VUE axios 跨域访问问题：CORS error
一.问题现象项目采用的VUE前后端分离开发方案,前端axios GET请求chrome调试模式显示: http stauts:CORS error 请求头:Request URL: http://l ...

vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别

1. 导航守卫：拦截组件

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

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

vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别相关推荐

最新文章

热门文章