使用vue判断验证用户登录状态
- 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等。
- 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向。
- 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态。也可以结合sessionStorage 和localStorage使用,原理相同。
用户登录状态验证
路由配置
定义需要判断登录状态的meta 属性auth
const routes =[
{
path:'/',
component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
meta:{auth:true,keepAlive: false},
name:'Filtrate'
},//首页
{
path:'/Home',
component: resolve => require(['../components/mainTem/Home.vue'],resolve),
meta:{auth:true,keepAlive: true },
name:'Home'
},//登录
{
path:'/Login',
component: resolve => require(['../components/mainTem/Login.vue'],resolve),
meta:{auth:true,keepAlive: false},
name:'Login'
},//最新案例
{
path:'/NewCase',
component: resolve => require(['../components/mainTem/NewCase.vue'],resolve),
meta:{auth:true,keepAlive: true},
name:'NewCase'
},//推荐
{
path:'/Recommend',
component: resolve => require(['../components/mainTem/Recommend.vue'],resolve),
meta:{auth:true,keepAlive: true},
name:'Recommend'
},//个人中心
{
path:'/User',
component: resolve => require(['../components/mainTem/User.vue'],resolve),
meta:{auth:true,keepAlive: true},
name:'User'
},//筛选
{
path:'/Filtrate',
component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
meta:{auth:true,keepAlive: false},
name:'Filtrate'
},
{//详情
path:'/Detail',
component: resolve => require(['../components/mainTem/Detail.vue'],resolve),
meta:{auth:true,keepAlive: false},
name:'Detail'
}
]
监听
我用的是localStorage储存的用户token值。
业务逻辑:用户没有localStorage说明是第一次登录,则直接跳到登录页面,在登录页面储存token值,存在localStorage,用户关闭页面后,在24小时内,再次打开页面直接进入主页面,通过localStorage去判断当前token是否有效,如果已失效,则提示登录已超时,重新跳到登录页面。
meta
只有在路由中设置了meta auto属性为true的才判断,以上路由全部由设置
to
to为向后走的路由对象,包括路由的完整信息
from
from为从哪跳来的路由对象
next()
next()控制路由向下走,重新定义路由跳转的路由next(‘路由路径)
/** 验证用户是否登录 **/
router.beforeEach((to,from,next) => {
if(to.matched.some( m => m.meta.auth)) {
// console.log("先判断是否登录");
if(to.name=='Login'){
next();
}else{
if(localStorage.getItem('token')){
//访问服务器缓存数据,判断当前token是否失效
Vue.http.get("http:xxxx/Login/UserIsLogin"+localStorage.getItem('token')+"&url="+to.name,{withCredentials: true}).then(response => response.json()).then(num => {
// console.log('是否登录',num);
if(num.code==1001){
next();
}else{
alert('您的token已超时,请重新登录');
next('/Login');
}
})
}else{
next('/Login');
}
}
} else {
console.log("请先登录");
next()
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“vue-router beforeEach跳转路由验证用户登录状态”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2026年03月28日
2026年03月28日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]