时间戳

首页 > 解决方案 > “Vue”类型上不存在属性“$keycloak”

typescript - “Vue”类型上不存在属性“$keycloak”

问题描述

我的 Vue.js 路由器代码中出现以下错误（请参见下面的代码段）：

Property '$keycloak' does not exist on type 'Vue'

问题是我的代码可以编译并且可以工作，但是当我尝试控制台日志时，router.app我看不到该属性$keycloak。

我是 Vue.js 的初学者。

谢谢你的帮助。


    import VueRouter, { RouteConfig } from "vue-router";
    import Home from "../views/Home.vue";
    import About from "../views/About.vue";

    const routes: Array<RouteConfig> = [
      {
        path: "/",
        name: "Home",
        component: Home,
        meta: {
          isAuthenticated: false,
        },
      },
      {
        path: "/about",
        name: "About",
        component: About,
        meta: {
          requiresAuth: true,
        },
      },
    ];

    const router = new VueRouter({
      mode: "history",
      base: process.env.BASE_URL,
      routes,
    });

    router.beforeEach((to, from, next) => {
      console.log(router.app);
      console.log(router.app.$keycloak);
      if (to.matched.some((record) => record.meta.requiresAuth)) {
        if (router.app.$keycloak.authenticated) {
          next();
        } else {
          const loginUrl = router.app.$keycloak.createLoginUrl();
          window.location.replace(loginUrl);
        }
      } else {
        next();
      }
    });

    export default router;

标签： typescriptvue.jsvuejs2keycloak

解决方案

这很可能是由于$keycloak没有在Vue类上定义属性。你可以通过使用来解决这个问题(router.app as any).$keycloak...，但是这不是类型安全的，通常不推荐。您还可以注册$keycloak为 Vue 插件 - 查看这篇文章以获取有关插件的更多信息。

是否$keycloak需要在 Vue 实例上定义，或者有其他方法可以实现吗？

推荐阅读