Framework 7 Vue中的路由防护

Question

当我执行以下操作时：

{
      path: '/chat/',
      async(routeTo, routeFrom, resolve, reject) {
        if (localStorage.getItem('token')) {
          resolve({
            component: require('./assets/vue/pages/chat.vue'),
          });
        } else {
          resolve({
            component: LoginPage
          });
        }
      },
    }

一切正常，但是如果我这样做：

{
      path: '/chat/',
      component: require('./assets/vue/pages/chat.vue'),
      async(routeTo, routeFrom, resolve, reject) {
        if (localStorage.getItem('token')) {
          resolve();
        } else {
          resolve({
            component: LoginPage
          });
        }
      },
    }

然后，无论异步如何，组件都会始终解析。 当我尝试使用beforeEnter函数而不是async时，也是如此。 如果组件是在路线的顶层定义的，则始终会解析。

如何在路由上放置身份验证中间件？

Answer 1

也许试试这个。

const checkAuth = (to, from, resolve, reject) => {
   if (localStorage.getItem('token')) {
     resolve({ component: routeComponentMap[to.name] })
   } else {
     resolve({ component: LoginPage })
   }
}

const routeComponentMap = {
  CHAT: require('./assets/vue/pages/chat.vue')
}

const routes = [{
  path: "/chat/",
  name: "CHAT",
  async: checkAuth
}]