vue.js:路由保护等待异步值

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/protected',
      component: ProtectedComponent,
      meta: { requiresAuth: true } // 添加meta字段，表示需要进行路由保护
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 在这里进行异步操作，例如检查用户是否已登录
    checkUserLoggedIn().then(loggedIn => {
      if (loggedIn) {
        next() // 条件满足，继续导航
      } else {
        next('/login') // 条件不满足，重定向到登录页面
      }
    })
  } else {
    next() // 不需要保护的路由，直接导航
  }
})

// 模拟异步操作，返回一个Promise
function checkUserLoggedIn() {
  return new Promise(resolve => {
    // 假设异步操作需要1秒钟完成
    setTimeout(() => {
      const loggedIn = true // 假设用户已登录
      resolve(loggedIn)
    }, 1000)
  })
}

export default router