Vue路由权限校验时未登录用户访问出现内部面板闪屏如何解决

问题根因 #

闪屏的核心原因是路由守卫执行身份判断时，登录状态还未完成初始化，导致第一次守卫判断放行，渲染了Panel组件，等登录状态初始化完成后才触发二次跳转，中间的时间差就出现了闪屏。另外路由配置中无效的自我重定向也会放大这个问题。

修复方案 #

1. 修正路由配置的重定向逻辑 #

当前根路由设置redirect: "/"属于自我重定向，会触发多次路由匹配逻辑，修改为直接指向子路由：

const routes = [
  {
    path: "/",
    name: "Base",
    component: Base,
    // 改为指向Panel子路由，避免自我循环重定向
    redirect: { name: "Panel" },
    meta: {
      authRequired: true,
    },
    children: [
      {
        path: "",
        name: "Panel",
        component: Panel,
      }
    ]
  },
  // 登录页路由注意不要加authRequired标记
  {
    path: "/login",
    name: "Login",
    component: Login
  }
]

2. 调整Pinia auth store的初始化逻辑 #

给auth store增加初始化完成的标记，避免在状态未加载完成时执行判断。如果你的登录状态存在本地存储，要同步初始化，不要用异步逻辑读本地存储：

// useAuthStore 示例
export const useAuthStore = defineStore('auth', {
  state: () => ({
    authState: undefined, // 初始值设为undefined，不要直接设为false
    isAuthLoaded: false
  }),
  actions: {
    initAuth() {
      // 同步读本地存储的登录状态，不要用异步
      const token = localStorage.getItem('token')
      this.authState = !!token
      // 如果需要后端校验token有效性，这里可以加异步请求，标记为async即可
      this.isAuthLoaded = true
    }
  }
})

3. 优化路由守卫逻辑 #

等待auth状态初始化完成后再执行判断，同时用vue-router 4+推荐的返回值写法代替next回调，避免回调逻辑异常：

// 路由守卫修改
router.beforeEach(async (to) => {
  const authStore = useAuthStore(router.pinia)
  // 等待auth状态初始化完成
  if (!authStore.isAuthLoaded) {
    await authStore.initAuth()
  }
  // 需要登录的路由判断
  if (to.matched.some(record => record.meta.authRequired)) {
    if (!authStore.authState) {
      // 直接返回要跳转的路径，不需要next
      return '/login'
    }
  }
})

4. 增加全局加载遮罩兜底 #

在根组件（App.vue）中增加全屏加载状态，auth状态未初始化完成前不渲染路由视图，彻底避免闪屏：

<template>
  <!-- 全屏加载遮罩 -->
  <div v-if="!authStore.isAuthLoaded" class="loading-mask">
    加载中...
  </div>
  <router-view v-else />
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
</script>

<style scoped>
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
</style>

内容的提问来源于stack exchange，提问作者Dave