前端路由鉴权怎么做才不会闪现未授权页面？

莉娟 Dev 提问于 2026-03-29 22:27:12 阅读 3

前端

我在用 Vue Router 做后台管理系统，想在进入某些路由前判断用户是否登录。现在的问题是，即使我在 beforeEach 里写了跳转逻辑，页面还是会先闪一下目标组件，然后才跳回登录页，体验很不好。

我试过把路由守卫写成这样：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

但还是会有短暂的未授权页面渲染。是不是应该把鉴权逻辑提到更早的地方？或者需要配合组件内的 loading 状态？

前端路由路由鉴权

我来解答赞 0 收藏

反馈

1 条解答

令狐欣胜 Lv1

我之前也碰到过这个问题，确实挺烦人的。解决办法其实就是在应用启动时先检查用户状态，而不是等路由跳转时再做判断。

首先在 main.js 里加个全局变量来保存登录状态，比如叫 isAuthenticated。然后在 new Vue() 之前就去获取这个状态：

let isAuthenticated = false

if (localStorage.getItem('token')) {

  isAuthenticated = true

}



new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

接着在 router.beforeEach 里直接用这个变量判断，不用再调用函数了：

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

  if (to.meta.requiresAuth && !isAuthenticated) {

    next('/login')

  } else {

    next()

  }

})

这样就能避免页面闪现的问题了。记得把 token 存储和更新的逻辑处理好就行。有时候前端这活儿就是得折腾细节，累是累了点，但弄明白了还挺有成就感的。

2026-03-29 23:00