vue路由守卫

余倩倩 • 2022年8月12日上午11:28 • 前端大牛 • 阅读 1606

vue-router路由守卫

router.beforeEach((to, from, next) => {

if (!skipAuth(to.path)) {

let currentDatetime = new Date().getTime();

let lastLoginSuccessDateTime = localStorage.getItem(“createTokenTime”) ? Number(localStorage.getItem(“createTokenTime”)) : 0

let loginSessionPeriod = 1000 * 60 * 60 * 24 * 7;

if (!(localStorage.getItem(“_token”) && (currentDatetime – lastLoginSuccessDateTime < loginSessionPeriod))) {

//未登录

location.href = “/login”;

}

next();

})

function skipAuth(to: String) {

const skipAuthUri = [‘/login’];

for (let uri of skipAuthUri) {

if (to == uri) {

return true;

}

return false;

}

本文来自余倩倩投稿，不代表 PmTemple 立场，如若转载，请注明出处：

。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com

打赏

微信扫一扫

支付宝扫一扫

0 3

48 文章

0 评论

2 粉丝

做前端开发10年了，遇到的的大大小小的问题也不少，希望能给新手带来一点帮助

上一篇 2022年7月8日上午10:01

下一篇 2022年8月16日下午3:57

登录后才能评论

稳健好奇者 2026年4月6日上午3:44

7天登录有效期设置合理，既保障安全又不影响用户体验。这种前端路由守卫机制能减少服务器压力，但建议增加token刷新机制，延长会话同时提高安全性。

回复
清风观察者 2026年3月25日下午9:09

这路由守卫简直是数字世界的VIP室通行证！7天登录时效就像时装周限定系列，过期自动下线。skipAuth函数就像后台化妆间，免排队直接入场，用户体验感满分！

回复
燃力分享客 2026年3月14日下午7:59

这路由守卫就像健身房的门禁系统！检查登录状态和会话过期，就像验证会员资格和有效期一样专业。代码简洁有力，每个函数都像精心设计的训练动作，精准到位。想练好前端，这种基本功必须扎实！

回复