vue：在路由跳转中使用拦截器

最新推荐文章于 2025-04-20 22:52:36 发布

转载最新推荐文章于 2025-04-20 22:52:36 发布 · 787 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/llqwm/p/9154933.html

文章标签：

#javascript #前端 #ViewUI

本文介绍如何在Vue项目中实现路由级别的权限控制。具体步骤包括：为需要认证的路由添加requireAuth属性；在main.js中使用beforeEach钩子检查登录状态，并根据用户登录情况决定是否允许导航到目标路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：首先在路由对象中的某一个具体的路由对象加这样一个属性

meta: { requireAuth:true }

2:然后在main.js中添加这段代码

router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (localStorage.getItem('a')) { // 通过vuex state获取当前的token是否存在,通过一个变量（vuex中或localstorage中），如果为真，那么跳转

next();
}else {
alert('请输入账号和密码')
next({
path: '/',//如果为假，则重定向到这个路由路劲
query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
}else {
next()
}
})

结束！！！这样就能在跳转之前拦截并做一些操作。

转载于:https://www.cnblogs.com/llqwm/p/9154933.html