方式一：keycloak-js

这种方式就像使用QQ登录一样，登录会跳转到 keycloak 给的登录界面。

安装：

npm i keycloak-js

使用：

import Keycloak from 'keycloak-js'const keycloak: any = Keycloak({url: 'https://xxx.com/', // 远程地址realm: 'xxx',clientId: 'xxx'
})
keycloak.init({onLoad: 'login-required'}).then((auth: boolean) => {if (!auth) {window.location.reload();} else {new Vue({el: '#app',render: h => h(App, { props: { keycloak } })})}
})

详细请查看：https://www.keycloak.org/securing-apps/vue

退出登录：

keycloak.logout()

更多方法可以打印 console.log(keycloak) 查看

方式二：vue-keycloak-js

这个是针对 vue 项目封装的 keycloak-js。

安装地址：https://www.npmjs.com/package/@dsb-norge/vue-keycloak-js

安装：

npm i @dsb-norge/vue-keycloak-js 

使用：

import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'Vue.use(VueKeycloakJs, {init: {onLoad: 'login-required'},config: {url: 'https://xxx.com/',realm: 'xxx',clientId: 'xxx'},onReady: (keycloak) => {new Vue({router,store,render: h => h(App)}).$mount("#app")// 获取用户的信息// keycloak.loadUserProfile().success((data) => {//   console.log(data)// })}
})

详细请查看：https://blog.csdn.net/weixin_44326389/article/details/121770219

方式三：RESTful API

这种试可以使用自定义的登录界面。

axios.post(`/keycloak/realms/xxx/protocol/openid-connect/token`, {client_id: 'xxx',username: 'xxx',password: 'xxx',grant_type: 'password',
}).then(res => {console.log(res) // 会返回包含 access_token 的信息，access_token 可在线解析成明文数据：https://jwt.io/
})

或者使用 jwt-decode 进行 access_token解析。

接口代理：

server: {proxy: {'/keycloak/': {target: 'https://xxx.com/',changeOrigin: true,rewrite: (path) => path.replace(/^\/keycloak/, ''),}}
},

其他接口请求需要加 token 验证（keycloak 使用的是 JWT）：

axios({url: '/keycloak/user/list',headers: {'Authorization': `Bearer ${access_token}`}
}).then(res => {console.log(res)
})

最新内容请看原文链接：https://fenxianglu.cn/article/493