vue设置token过期时间，过期重新到登录页面,浏览器本地保存有token就直接不用输入账号密码跳转到首页

您所在的位置：网站首页 › 未检测到用户登录信息怎么办 › vue设置token过期时间，过期重新到登录页面,浏览器本地保存有token就直接不用输入账号密码跳转到首页

vue设置token过期时间，过期重新到登录页面,浏览器本地保存有token就直接不用输入账号密码跳转到首页

2024-07-15 14:03| 来源: 网络整理| 查看: 265

在做一个项目的时候，乙方公司提出了一个业务需求：设置token的过期时间，如果过期了就重新导登录页面，如果用户在token还没有过期的时候打开了登录页面就直接跳转到首页。

直接上代码

methods: { // 登录 handleLogin() { this.$axios.post('/api/Login',{ username: this.loginForm.username, password: this.loginForm.password }).then(res => { if(res.data.code != 0) return this.$message.error(res.data.message) if(res.data.code == 0){ this.$message.success('登录成功') // 存储token开始时间 window.localStorage.setItem('tokenStartTime',new Date().getTime()) // 存储token window.localStorage.setItem('token',res.data.data.token) this.$router.push('/home/ks') }else { this.$message.error('登录失败') } }) } }

main.js 代码：

// 添加请求拦截器 // 拦截器的第一部分，第二部分在router index.js里面 axios.interceptors.request.use(function(config) { // 在发送请求之前做些什么 // 判断是否存在token,如果存在将每个页面header添加token if (window.localStorage.getItem("token")) { config.headers.common['Access-Token'] = window.localStorage.getItem("token"); } return config })

router index.js 代码：

// 导入element提示语的组件 import { Message } from 'element-ui' // 添加请求拦截器 // 拦截器的第二部分，第一部分在main.js里面 router.beforeEach((to, from, next) => { // 获取存储localStorage的token let token = window.localStorage.getItem('token') // 获取存储token的开始时间 const tokenStartTime = window.localStorage.getItem('tokenStartTime') // 后台给出的token有效时间，一个星期单位是秒 // 我们自己定义6天过期，让用户重新登录一下，用户总不可能在一个页面挂机一天吧 const timeOver = 6 * 24 * 3600 * 1000 // 当前时间 let date = new Date().getTime() // 如果大于说明是token过期了 if(date - tokenStartTime > timeOver) { token = null } // 如果token过期了 if (!token) { if (to.path == '/login') return next() // 注意要import element的Message组件 Message.error("登录状态过期，请重新登录") return next('/login') // 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码 } else if (to.path == '/login') { return next('/home/ks') } next() }) export default router

因为我使用了Message组件作为提示要注意一点是要导入element的Message组件

【本文地址】

vue设置token过期时间，过期重新到登录页面,浏览器本地保存有token就直接不用输入账号密码跳转到首页

vue设置token过期时间，过期重新到登录页面,浏览器本地保存有token就直接不用输入账号密码跳转到首页

今日新闻

推荐新闻