vue.js项目中在axios响应拦截器中跳转登录页面

最新推荐文章于 2024-05-23 15:25:32 发布
最新推荐文章于 2024-05-23 15:25:32 发布
阅读量1.6w 收藏 14
点赞数 6
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28218253/article/details/85158238
版权

首页和后端约定好错误码。

约定错误码后，写好提示提示框信息
在这里插入图片描述

重点
原来我用this.$router.push(’/’)来进行跳转首页的
但是发现路由好像是空的
然后我又动态加载路由。。发现还是不行，

最后简单点，直接跳转，没想到成了
在这里插入图片描述
说到这里不得不提下element-ui 的MessageBox引用。
文档地址
MessageBox的文档说明
在这里插入图片描述
在这里插入图片描述
当用户点击按钮 跳转登录页面。会返回登录页面。
总比一声不吭就跑到登录页面。用户会很懵逼的！
在这里插入图片描述

欲掩不从心
关注
  • 6
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue番外之在响应拦截器中跳转页面
二木成林
03-10 6113
需求是这样的：由于访问某些页面及请求需要用户登录，后台作了一个判断并返回了响应信息： 前端根据这个响应来判断用户是否登录，如果用户没有登录则跳转到登录页面。 如果在每个请求后的响应都做判断，那么前台的每一条请求都需要做这种判断，请求越多写的代码也就越多，而vue有一个响应拦截器，就跟Java的请求拦截器一样，可以拦截后台的所有响应。 基本代码格式如下： 然后在vue项目的main.js中进行配置，大概代码如下： import Vue from 'vue' import App from
vue---axios拦截器处理登录失效跳转登录页
maidu_xbd的博客
03-23 8707
axios拦截器（Interceptors）主要分为： （1）请求拦截器：在发送请求前进行拦截，可以根据发送的请求参数做一些发送参数的调整，例如设置headers （2）响应拦截器：在后台返回响应时进行拦截，可以根据状态码进入下一步处理。例如：登录失效跳转回登录页。 项目需求：根据后台返回的状态码，统一处理。例如：token失效，回到登录页面；返回错误，给出统一的错误提示。 完整代码：...
Axios配置中的请求响应拦截器
最新发布
m0_54007573的博客
05-23 635
Axios配置中的请求响应拦截器
vue的axios拦截器实现未登录页面跳转
ywb201314的专栏
09-21 3843
1.拦截器分为request请求拦截器和response响应拦截器 PS：request请求拦截器：发送请求前统一处理，如：设置请求头headers、应用的版本号、终端类型等。 response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作。 2.main.js文件中（先安装axios） import axios from 'axios' // 给Vue函数添加一个原型属性$axios指向axios.
【经典面试题】axios封装时请求拦截器跳转到登录页怎么实现？
王春燕的博客
05-22 2867
axios拦截器（Interceptors）主要分为： （1）请求拦截器：在发送请求前进行拦截，可以根据发送的请求参数做一些发送参数的调整，例如设置headers （2）响应拦截器：在后台返回响应时进行拦截，可以根据状态码进入下一步处理。例如：登录失效跳转回登录页。 项目需求：根据后台返回的状态码，统一处理。例如：token失效，回到登录页面；返回错误，给出统一的错误提示。 代码演示 // 导入axios import axios from "axios"; import { MessageBo
在main.js的axios中配置响应拦截器，当token值不合法直接跳转到登录页
南极修炼千年的大冰块
09-29 824
先上代码： // 给axios配置响应拦截器 axios.interceptors.response.use( function(response) { // 通过响应拦截器，直接返回 res.data console.log(response.data.code) if (response.data.code === 4002) { Vue.prototy...
vue 实现axios拦截、页面跳转和token 验证
10-18
主要介绍了vue 实现axios拦截、页面跳转和token 验证，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-基于Vue+axios前端实现登录登出拦截功能.zip
05-04
我们可以在Vue实例中设置axios拦截器来处理登录验证： 1. **请求拦截器**: 在每个API请求发出之前，检查用户的登录状态。如果用户未登录，可以重定向到登录页面。 2. **响应拦截器**: 对于401未经授权的错误，这...
vue中前端利用refreshToken结合axios拦截器实现token的无感刷新
01-16
1、响应拦截器处理401权限错误。 2、防止重复请求refreshToken接口。 3、同时多个请求返回401，需要刷新token。 阅读建议：此资源以简单的demo演示了RefreshToken使用的全过程，介绍了基本的思路，所以在学习的过程...
在Vue中使用axios请求拦截的实现方法
10-17
4. **登录状态验证**：在响应拦截器中检查返回的状态码，例如，当状态码为10时，表示登录超时，可以自动跳转到登录页面。 二、不使用请求拦截器的弊端 如果不使用拦截器，每个请求都必须独立处理上述情况，导致...
axios封装时请求拦截器跳转到登录页怎么实现？
leveretz的博客
02-27 814
axios封装时请求拦截器跳转到登录页怎么实现？
项目中使用axios拦截器实现异地登陆下线跳转登陆页面！
weixin_43330752的博客
01-18 1383
第一步：创建uilt文件夹/axios.js （名字随你取） import axios from 'axios' import router from '@/router/index.js' import {Loading, Message} from 'element-ui' const service = axios.create({ baseURL: process.env.BA...
前端react/vue跨域拦截 axios
wangweiruning的博客
07-11 1082
前端react/vue跨域拦截   axiosfirst stepimport  axios from 'axios'inport  qs from 'qs'const server = axios.create({    timeout:5000,    headers:{'Content-Type':'application/x-www-form-urlencode'}})server.int...
VUE-06 axios的路由跳转功能,父页面和子页面的结合
m0_59214979的博客
09-15 2002
本页主要学习：axios的路由跳转功能 1.html代码的编写： 2.script的代码编写： (1) html，script完整代码： <template> <!-- 商品管理首页 --> <div style="display:flex;"> <!-- display:flex是让包含着的div盒子不换行，vw 百分之xx屏幕 --> <div style="width:10vw">后台管理系统</di.
vue3+axios+router实现页面跳转及登录
qq_53541336的博客
08-24 4921
2.由于vite构建的项目中需要自己手动下载路由以及创建路由文件夹，所以在创建好的项目文档中找到src文件夹，在src文件夹下创建router文件夹，并且在其下创建index文件，对于index文件中要写的内容如下，在此之前还需要创建一个views文件夹，本次项目主要用到三个页面，所以需要在views文件夹下需创建三个文件，包括HomeView.vue、AboutView.vue、UserLoginView.vue。1.开始搭建项目框架，使用vite来构建项目。7.最后来看看实际效果吧。
ajax实现页面跳转
qq_46111269的博客
07-28 7040
上网去查，学到一个新的方法top.location.href，诶，这个top就有意思了，它可以跳脱出框架，在顶层打开新窗口，看起来就很有戏，果然，成功了。刚学完ajax没多久，想着写个注册界面，利用ajax把用户名和密码传过来，注册成功以后跳转到登录界面，之前一直用的是Servlet来重定向，结果直接就是说没有反应，调了半天就是不成功。，我又想到一个方法，既然后端传不了，那我走前端，前端里面不是有一个方法location.href，我就喜滋滋的把路径一封装传前面去了。...
使用Axios拦截器携带token以及跳转错误页面
qq_17831715的博客
03-18 708
使用Axios拦截器携带token以及跳转错误页面 前言 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，在使用Axios时候，一般我们会进行一定的封装，Axios拦截器分为请求拦截器 和 相应拦截器，请求拦截器主要的作用是在请求后端接口前，携带Token信息，而响应拦截器的主要作用是对后端的状态码进行校验，跳转到对应的页面 创建Axios对象 这里...
vue axios全局封装请求 和 vue三种js跳转页面方式
m0_47843571的博客
08-23 2739
axios全局封装请求 第一步在src文件下新建api文件 文件下新建request.js文件 // 导入axios import axios from "axios"; // 进行一些全局配置 // 公共路由(网络请求地址) 接自己的开发接口网址 axios.defaults.baseURL = "https://www.baidu.com/"; // 请求响应超时时间 axios.defaults.timeout = 5000; // 封装自己的get/post方法 export default
vue中用户未登录跳转到登录页，登录后返回将要去的页面或者之前的页面
热门推荐
夜子月的博客
06-08 5万+
最近写用户登录，网上很多办法是在route的query保存上个页面的url，然后登录后再跳转到这个页面。但是如果我跳转的页面有很多的参数也在query里，这样就不好操作了。下面我先附上用户未登录跳转登录页的方法。请求我用的是axios。如果方便点，我们可以用axios的全局配置，来拦截请求回来的数据，当请求回来的状态码不是成功的时候，跳转登录页 ，我们公司1001是错误的状态，这个根据自己公司来定...
vue在响应拦截器中跳转路由
07-31
要在响应拦截器中跳转路由，首先需要在项目中引入Vue Router，并在main.js或者需要使用路由的文件中进行配置。 首先，需要在项目中安装Vue Router，可以使用npm或者yarn进行安装。然后，在main.js文件中引入Vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值