“Vue”类型上不存在属性“$keycloak”答案

【问题标题】：Property '$keycloak' does not exist on type 'Vue'“Vue”类型上不存在属性“$keycloak”
【发布时间】：2021-12-17 09:21:07
【问题描述】：

我的 Vue.js 路由器代码中出现以下错误（请参阅下面的 sn-p）：

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;

【问题讨论】：

我假设您使用的是 @dsb-norge/vue-keycloak-js 包，如果是这样，您需要注册 VueKeyCloak 以与您的 Vue 应用程序一起使用；见github.com/dsb-norge/vue-keycloak-js#usage
是的，我可以访问组件中的 $keycloak 属性，但不能访问我的 router.beforeEach，我不知道为什么。但是Vue.prototype.$keycloak 工作。
要获得更多帮助，请您在网上某个地方提供一个可复制的小型应用程序版本；我建议使用类似codesandbox.io

标签： typescript vue.js vuejs2 keycloak

【解决方案1】：

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

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

【讨论】：

感谢您的提示。我可以在所有组件中访问 $keycloak，但在我的 router.beforeeach 中没有访问权限，我看到 Vue.prototype.$keycloak 在我的 router.beforeeach 中也可以使用