vue项目，token失效退出登录时，再次登录跳转至上次退出时的页面

最新推荐文章于 2023-08-16 16:30:50 发布
最新推荐文章于 2023-08-16 16:30:50 发布
阅读量1.4k 收藏 6
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkaalexi/article/details/124614457
版权
本文介绍了一个Vue.js项目中处理token失效的情况。当检测到token失效时，应用将用户重定向到登录页面，并保存之前试图访问的路由。登录成功后，用户会自动跳转回原来的页面。
摘要由CSDN通过智能技术生成

在路由导航守卫中，token失效时

router.beforeEach((to, from, next) =>{
   
if (getToken()) {
   
      next()
    }
最低0.47元/天 解锁文章
kkaalexi
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue利用路由钩子token过期后跳转到登录页的实例
08-29
本篇将详细介绍如何利用Vue Router的路由钩子来实现在用户token过期后自动跳转到登录页。 Vue Router提供了多种类型的钩子，包括全局导航钩子、单个路由独享的钩子以及组件内的钩子。这些钩子的主要作用是在路由...
vue中实现token过期后退出登录，定时退出
一位前行者的博客
08-20 3144
设置路由全局守卫permassion.js并且引入到main.js中 main.js中引入 import './permassion' // 你的全局路由守卫文件路径 permassion.js内容 在全局路由中调用监听token的setstorage.js import router from './router' import store from './store' // 调取vuex import setStorage from '@/router/component/storage' /
vue中axios中请求配置token过期和登录成功重新跳转
weixin_43837268的博客
07-26 2513
// 添加请求拦截器，在请求头中加token axios.interceptors.request.use( config => { let token = sessionStorage.getItem('Authorization'); if (token) { config.headers.Authorization = token; } return config; }, error => { return Promise..
登录返回原页面
最新发布
weixin_44941576的博客
08-16 247
token失效后，路由记录参数，由登录的时候检查是否存在该参数进行页面跳转
umi-request请求中自动维护token、refresh token
奇乐软件开发踩坑日志
09-11 2884
locatstorage缓存管理token值 export default class Authority { /** * 保存token * * @param data * @param key * @return void */ public saveToken(data: { token_type?: string; expires_in?: number; access_token?: string; refresh_.
Vue跳转到另一页面后如何返回原来的页面
qq_44573359的博客
07-06 4559
将跳转前的url路径编码后作为query参数传到另一页面中，在另一页面中解码参数获得跳转前的url路径，利用window.open()跳转回原来的页面。 2.解码
vue 实现axios拦截、页面跳转和token 验证
10-18
在现代Web应用开发中，Vue.js已成为流行的前端框架之一，而axios是一个...这不仅能有效防止未经授权的用户访问敏感页面，还能提升用户的体验，使其在token失效时能即时地被引导进行登录，从而安全地访问受保护的路由。
Vue-resource拦截器判断token失效跳转的实例
08-29
Vue-resource拦截器判断token失效跳转的实例 本文将详细讲解 Vue-resource 中的拦截器机制，并提供一个实例，演示如何使用拦截器来判断 token 是否失效，并自动跳转到登录页面。 首先，让我们来了解什么是拦截器。...
vue的token刷新处理的方法
10-18
6. **异常处理**：如果 `refresh_token` 也已过期，或者刷新请求失败，提示用户重新登录，并清理本地存储的 `auth` 信息，重定向至登录页面。 以下是示例代码片段，展示如何在 Vue 的 Axios 请求拦截器中实现上述...
token过期后记录当前页面路由，重新登陆跳转至原页面
m0_49969710的博客
06-06 1068
实现当token过期，重新登录后返回原页面
vue开发客户端------token失效路由跳转到登陆页
qq_33039355的博客
10-20 1540
客户端token失效的情况下,点击其他路由要自动跳转到登陆页 实现方式: 在路由文件router/index.js文件下面的登录路由中添加一个对公的条件,然后在beforeEach钩子函数中添加条件判断条件: // 登录的路由中添加对公的条件 { path: "/", redirect: "/login", },{ path: "/login", name: "login", component: () => import("../views/login
vue项目中，token失效退出登陆时，如何再次登录的时候跳转至上次退出时的页面？
lizhichengwei的博客
12-25 3077
主要核心代码其实也就3句，大家可以仔细研究一下，不理解的地方可以打印出来看看里面是什么。当我们token失效的时候，服务器一般会返回401，这个时候我们一般都会在。仔细看以下的步骤，可以好好理解一下。，那么我们要怎么去做可以。
登录验证，未登录时跳转登录页面，登录了直接跳转相应页面（vue）（vue-router）
weixin_61285710的博客
01-21 2584
登录验证，未登录时跳转登录页面，登录了直接跳转相应页面（vue）（vue-router）
最简单vue用户登录失效跳转登录页
请叫我欧皇！的博客
04-03 3093
不需要通过后端的token传的时间解析后来判断思路：在用户登录时，把当前时间戳存储在本地，之后在layout布局页面通过定时任务判断就完成了。
vue2实现当用户token过期时重新跳转到登录页功能
z1034243392的博客
12-25 2788
1. 在登录页面实现点击立即登录功能 ​ ​ login() { console.log(1111); let date = { name: this.form.name, pass: this.form.pass, }; getLogin(date).then((res) => { console.log(res); let suc = res.meta.msg; if
vue设置token过期时间，过期重新到登录页面,浏览器本地保存有token就直接不用输入账号密码跳转到首页
热门推荐
林同学啊的博客
01-21 1万+
在做一个项目的时候，乙方公司提出了一个业务需求：设置token的过期时间，如果过期了就重新导登录页面，如果用户在token还没有过期的时候打开了登录页面就直接跳转到首页。 直接上代码 login.vue 代码 methods: { // 登录 handleLogin() { this.$axios.post('/api/Login',{ username: this.loginForm.username, pass
【vue】vue实现用户长时间不操作，提示用户登录已过期重新登录
小朋友的博客
04-26 9923
vue实现用户长时间不操作，提示用户登录已过期请重新登录
关于用户没有权限路由守卫跳转登录后页面跳转，返回之前浏览页面处理方法
weixin_50462008的博客
10-30 1589
路由守卫需要登录跳转后重回页面 问题：当我们访问页面需要token，路由守卫就会使跳转到登录页面， 这时如我们没有进行重定向就会跳转到个首页或者人中心页面。 解决方法：在响应拦截器里面，没有token的状态码进行判断，捕获401状态码 设置响应拦截 跳转带hash参数 window.location.href = /#/login?redirectURL=${window.location.hash.substr(1)} axios.interceptors.response.use(function (
vue的token验证判断失效退出到首页
weixin_44675051的博客
08-18 818
instance.interceptors.response.use( function (response) { console.log('全局响应拦截'); console.log(response.data.code); if (response.data.code == 501) { window.location.href = '/' } else { conso
vue2 如何统一处理接口响应的登录失效的数据 登录失效就跳转到登录页面
07-16
在Vue 2中，可以使用axios拦截器来统一处理接口响应的登录失效的数据，并实现跳转到登录页面的功能。 首先，需要安装axios，可以通过以下命令进行安装： ``` npm install axios --save ``` 接下来，在你的项目中创建一个`api`文件夹，并在其中新建一个`http.js`文件。在该文件中，引入axios并进行一些配置，如下所示： ```javascript // api/http.js import axios from 'axios'; // 创建axios实例 const http = axios.create({ baseURL: 'http://your-api-base-url.com', // 设置接口请求的基础URL timeout: 5000 // 设置超时时间 }); // 请求拦截器 http.interceptors.request.use( config => { // 在发送请求之前可以进行一些处理，例如添加请求头等 // config.headers['Authorization'] = 'Bearer ' + token; return config; }, error => { return Promise.reject(error); } ); // 响应拦截器 http.interceptors.response.use( response => { // 在接收到响应数据之后可以进行一些处理，例如判断登录失效等 return response.data; }, error => { // 处理响应错误 if (error.response && error.response.status === 401) { // 登录失效，跳转到登录页面 window.location.href = '/login'; } return Promise.reject(error); } ); export default http; ``` 在这个文件中，我们创建了一个axios实例，并在其中定义了请求拦截器和响应拦截器。在请求拦截器中，你可以进行一些请求相关的处理，例如添加请求头等；在响应拦截器中，我们判断了响应状态码是否为401，如果是，则表示登录失效，将会跳转到登录页面。 接下来，在需要发起接口请求的地方，将使用到这个axios实例。例如，在一个`userService.js`文件中，我们定义了一个登录接口的方法： ```javascript // api/userService.js import http from '@/api/http'; export function login(username, password) { return http.post('/login', { username, password }); } ``` 在上述代码中，我们通过`http`实例来发起请求。当登录接口返回401状态码时，拦截器会自动跳转到登录页面。 请注意，以上代码只是一个示例，你需要根据你的实际情况进行相应的修改和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值