Vue Router 怎么在全局前置守卫中实现登录拦截校验

浅磊同学_8233

浅磊同学_8233

2026-10-24

896人浏览

原创

登录拦截校验需在全局前置守卫中判断目标路由是否含meta.requiresauth标识,并检查localstorage中的token是否存在;未登录则跳转/login并携带重定向参数,已登录则放行,同时应校验token过期等有效性。

vue router 怎么在全局前置守卫中实现登录拦截校验

在全局前置守卫中实现登录拦截校验,核心是判断目标路由是否需要认证,并检查当前用户是否具备有效登录状态。只要逻辑清晰、状态来源可靠,整个过程很直接。

明确哪些路由需要拦截

在路由配置中,为受保护的页面添加 meta.requiresAuth: true 标识:

  • /dashboard、/profile、/order 等业务页应设为 requiresAuth: true
  • /login、/register、/public 等公开页不加该字段或显式设为 false
  • 支持嵌套路由:只要任意一层 matched 路由有 requiresAuth,就触发校验

在 beforeEach 中执行校验逻辑

守卫函数接收 to、from、next 三个参数。关键操作是:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习