{{ keycloak.authenticated }}
``` 或与编译时间合成糖 ```vue{{ keycloak.authenticated }}
``` 插件还添加了一个 `$keycloak` 属性到全局 Vue 实例. 这笼罩了大多数 keycloak 实例的属性和功能. 其他所有变量和函数均可在 `$keycloak.keycloak` 属性 ```vue{{ $keycloak.authenticated }}
``` 这两个方法的这个对象是 [反应](https://v3.vuejs.org/guide/reactivity-fundamentals.html#declaring-reactive-state) ,并将更新新符号和其他信息 自动. 这些属性/功能暴露在外: ``` { ready: Boolean, // Flag indicating whether Keycloak has initialised and is ready authenticated: Boolean, // Flag indicating whether the user is authenticated userName: String, // Username from Keycloak. Collected from tokenParsed['preferred_username'] fullName: String, // Full name from Keycloak. Collected from tokenParsed['name'] login: Function, // [Keycloak] login function loginFn: Function, // Alias for login logoutFn: Function, // Keycloak logout function createLoginUrl: Function, // Keycloak createLoginUrl function createLogoutUrl: Function, // Keycloak createLogoutUrl function createRegisterUrl: Function, // Keycloak createRegisterUrl function register: Function, // Keycloak register function accountManagement: Function, // Keycloak accountManagement function createAccountUrl: Function, // Keycloak createAccountUrl function loadUserProfile: Function, // Keycloak loadUserProfile function subject: String, // The user id idToken: String, // The base64 encoded ID token. idTokenParsed: Object, // The parsed id token as a JavaScript object. realmAccess: Object, // The realm roles associated with the token. resourceAccess: Object, // The resource roles associated with the token. refreshToken: String, // The base64 encoded refresh token that can be used to retrieve a new token. refreshTokenParsed: Object, // The parsed refresh token as a JavaScript object. timeSkew: Number, // The estimated time difference between the browser time and the Keycloak server in seconds. This value is just an estimation, but is accurate enough when determining if a token is expired or not. responseMode: String, // Response mode passed in init (default value is fragment). responseType: String, // Response type sent to Keycloak with login requests. This is determined based on the flow value used during initialization, but can be overridden by setting this value. hasRealmRole: Function, // Keycloak hasRealmRole function hasResourceRole: Function, // Keycloak hasResourceRole function token: String, // The base64 encoded token that can be sent in the Authorization header in requests to services tokenParsed: String // The parsed token as a JavaScript object keycloak: Object // The original keycloak instance 'as is' from keycloak-js adapter } ``` ## 选项 您可以通过一个对象作为插件的选项。 以下密钥是有效的选项 。 说明见下文. | 密钥 | 类型 | 默认 | | --- | --- | --- | | `config` | 字符串 QQ 对象 | `window.__BASEURL__ + '/config'` | | `init` | 对象 | `{onLoad: 'login-required'}` | | `logout` | 对象 | | | `onReady` | 函数( keycloak) | | | `onInitError` | 函数( 错误, keycloakError) | | | `onInitSuccess` | 函数( 经认证) | | | `onAuthLogout` | 函数( keycloak) | | | `onAuthRefreshError` | 函数( keycloak) | | | `onAuthRefreshSuccess` | 函数( keycloak) | | ### 配置 配置对象,或从终点(字符串)返回,或 直接设置(对象),必须与 [Keycloak JS 适配器](https://www.keycloak.org/securing-apps/javascript-adapter#_using_the_adapter) 构造参数 . 见下文说明. #### 字符串 如果此选项是字符串, 插件会将其作为 URL 处理, 并生成 HTTP 请求 . 如果不存在, 插件将寻找全局变量 `window.__BASEURL__` 并准备它 `'/config'` 和使用情况 这里是一个默认地点,可以提出获取请求. 若无 `window.__BASEURL__` 已存在, `/config` 已使用. 从请求中返回的值被用作Keycloak适配器的构造参数. 因此,它应当是具有有效密钥/值的对象. [参见 Keycloak 的 Javascript 适配器引用](https://www.keycloak.org/securing-apps/javascript-adapter#_using_the_adapter) 举个例子. ``` { realm: String, url: String, clientId: String } ``` 这些值将作为Keycloak官方适配器的构造参数. #### 对象 如果此选项是对象, 它将作为构造参数传递给 [Keycloak 适配器](https://www.keycloak.org/securing-apps/javascript-adapter#_using_the_adapter)。 。 。 . 在此情况下没有完成 HTTP GET 请求 . ### 输入 此选项是用于 `Keycloak.init` 方法. ### 登录 此选项是用于 `Keycloak.logout` 方法. ### 准备 此选项是一个调用功能, 一旦 Keycloak 已关闭并准备就绪, 即执行 。 你当然可以 vue 案件有财产 `$keycloak` 用于此函数。 可能值见上文. 回调函数有一个参数,即从 Keycloak 适配器上返回的 keycloak 对象 即兴表演. 这种回调的一种用法可以是即时处理并挂载Vue应用程序. 那么我们确定凯克洛克 认证和 `$keycloak` 属性正确完成并用数据水化: ```javascript import VueKeyCloak from '@dsb-norge/vue-keycloak-js' createApp(App) .use(VueKeyCloak, { onReady: (keycloak) => { console.log(`I wonder what Keycloak returns: ${keycloak}`) } }) .mount('#app') ``` 结合上述情况,你可能会发现截取Axios并按每项请求设置令牌是有用的: ```javascript function tokenInterceptor () { axios.interceptors.request.use(config => { const keycloak = useKeycloak() if (keycloak.authenticated) { // Note that this is a simple example. // you should be careful not to leak tokens to third parties. // in this example the token is added to all usage of axios. config.headers.Authorization = `Bearer ${keycloak.token}` } return config }, error => { return Promise.reject(error) }) } createApp(App) .use(VueKeyCloak, { onReady: (keycloak) => { tokenInterceptor() } }) .mount('#app') ``` ### 错误 此选项是一个调用函数, 如果 Keycloak 初始化失败, 则执行 . 回调函数有一个参数,即Keycloak返回的错误对象. 注意这一点可能未定义 即使发生了错误,因为 Keycloak 也不会在每个错误案件中返回错误对象 . ### 成功时 此选项是一个调用函数, 如果 Keycloak 初始化成功, 则执行 . 回调函数有一个参数,即 `authenticated` keycloak 返回的值 `init` 方法. ### 自动日志 此选项是一个调用函数, 当用户被登录出时执行( 只有在启用会话状态 iframe 时才能调用, 或者在 Cordova 模式下使用) . 回调函数有一个参数,即从 Keycloak 适配器上返回的 keycloak 对象 即兴表演. ### 重新定义错误 此选项是一个调用函数, 如果尝试刷新令牌时出错, 则执行 . 回调函数有一个参数,即从 Keycloak 适配器上返回的 keycloak 对象 即兴表演. ### 重新获得成功 此选项是一个调用函数, 当符号被刷新时执行 . 回调函数有一个参数,即从 Keycloak 适配器上返回的 keycloak 对象 即兴表演. ## 实例 ### 为 Keycloak 构造器提供配置对象 ```javascript createApp(App) .use(VueKeyCloak, { config: { realm: 'MyRealm', url: 'https://my.keycloak.server', clientId: 'MyClientId' } }) .mount('#app') ``` ### 供应输入选项( 无法监测登录状态) ```javascript createApp(App) .use(VueKeyCloak, { init: { onLoad: 'login-required', checkLoginIframe: false }, }) .mount('#app') ``` ### 供应输入选项(使用) `check-sso`(中文(简体) ) 记住; `login-required` 是 LOAD 属性的默认值 输入对象。 所以没有经过一个 `init` 对象作为参数,默认为 `{ init: 'login-required' }` ##### 为避免在装入 vue 应用程序前等待配置端点 : ```javascript createApp(App) .use(VueKeyCloak, { init: { onLoad: 'check-sso' }, }) .mount('#app') ``` ##### 等待 keycloak 适配器准备好后再装入 vue app : ```javascript const app = createApp(App) app.use(VueKeyCloak, { init: { onLoad: 'check-sso' }, onReady: kc => { app.mount('#app') } }) ``` ### 示例应用程序 您可以在 [实例](https://npmcn.com/package/%40dsb-norge/vue-keycloak-js/examples) 文件夹. #### 简单“ 在组件中” 秘密显示属性/ 函数 : [简单](https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/simple) #### 用 TypeScript 写的简单示例 : [类型标记](https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/typescript) #### 显示如何安全请求的轴截取器示例 : [轴相接器](https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/axios-interceptor) ## 如何释放 ```bash $ git checkout main $ npm version [major | minor | patch ] $ git push $ git push --tags ``` 前往 GitHub 并创建基于最新标签的新版本 . GitHub Actions随后会构建并发布到npmjs.com. ## 经常问的问题 我们试图回答这里最经常提出的问题. ### (原始内容存档于2018-10-03) (中文(简体) ). Localhost!. = 127.0.0.1 请注意, 如果您在自己的机器上运行 keycloak, 则必须与其地址的设置一致 。 从127.0.0.1创建的饼干不会被发送到"本地主机",反之亦然. ## 常见问题 ### @dsb-norge/vue-keycloak-js 是什么？ Vue 的 Keycloak 插件 ### 如何安装 @dsb-norge/vue-keycloak-js？ 在项目目录运行 npm install @dsb-norge/vue-keycloak-js，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @dsb-norge/vue-keycloak-js 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @dsb-norge/vue-keycloak-js 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @dsb-norge/vue-keycloak-js 可以商用吗？ @dsb-norge/vue-keycloak-js 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @dsb-norge/vue-keycloak-js 的下载量有多少？ 根据 npm 官方下载统计，@dsb-norge/vue-keycloak-js 在 2026/10/13 – 2026/11/11 这 30 天内被下载 31,985 次，日均约 1,066 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @dsb-norge/vue-keycloak-js 还在维护吗？ 最新版本 3\.0\.8 发布于 2026/06/15（4 个月前）；至今共发布 37 个版本，其中过去 12 个月发布了 2 个；首次发布于 2018/04/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。