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

Posted 2023-02-16

【中文标题】“Vue”类型上不存在属性“$keycloak”

【英文标题】：Property '$keycloak' does not exist on type 'Vue'

【发布时间】：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

【参考方案1】：

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

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

【讨论】：

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