在做一个项目的时候,乙方公司提出了一个业务需求:设置token的过期时间,如果过期了就重新导登录页面,如果用户在token还没有过期的时候打开了登录页面就直接跳转到首页。
直接上代码
login.vue 代码
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组件