vue2实现当用户token过期时重新跳转到登录页功能
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
·
1. 在登录页面实现点击立即登录功能
login() {
console.log(1111);
let date = {
//双向绑定的name数据和pass数据
name: this.form.name,
pass: this.form.pass,
};
getLogin(date).then((res) => {
console.log(res);
//res.meta.msg 调用接口成功时返回的变量
let suc = res.meta.msg;
//如果请求接口的数据不为空
if(res.data!=null){
let token = {
//请求接口的token值
name: res.data.token,
//当前的时间戳
time: new Date().getTime(),
};
//存入token 并将对象转化为字符串
localStorage.setItem("token", JSON.stringify(token));
}
if (suc == "登录成功") {
this.$router.push({ path: "/about" });
this.$message({
message: suc,
type: "success",
});
} else {
this.$message({
message: "请输入正确的用户名和密码",
type: "warning",
});
}
});
},
注:这里我用的element组件 实现用户名密码的双向数据绑定
getLogin是封装的路由 然后把date传到封装的路由里接受拼接
效果如下:
import http from "./http.js"
async function getLogin(date){
let {data} =await http.post("login?username="+date.name+'&password='+date.pass)
return data
}
export {getLogin}
2. 在路由页面定义路由守卫
//定义一个时间
let time=30000
//router. beforeEach 是全局钩子函数,它是在路由跳转之前所调用的函数,在实际开发中页面进度条的加载、设置页面标题、判断用户是否已经登录过了等等都可以在该函数中执行。
router.beforeEach((to, from, next) => {
//把转化为字符串的本地取出来 并转换回来
let token=JSON.parse(localStorage.getItem('token'))
//如果本地有数据
if(token){
//获取当前时间
let newtime=new Date().getTime()
// 当前时间减去存储时间是否大于30000毫秒
if(newtime-token.time>time){
// 如果大于清楚本地存储并跳转登录
localStorage.removeItem('token')
next('/')
}else{
}
}else{
//如果没有数据返回登录页面
if(to.path=="/"){
next()
}else{
alert('请先登录,在访问其他页面')
next('/')
}
}
})
注:router.beforeEach()一般用来做一些进入页面的限制。比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。
let time=xxx时间可以自定义 建议刚开始实验效果时定义短一点的时间 避免等待时间过长不出效果
更多推荐
已为社区贡献3条内容
所有评论(0)