KeyCloak实战|Vue项目集成Keycloak
keycloak是一个面向现代应用和服务的开源身份和访问管理解决方案。它使得针对应用程序和服务的保护变得容易，几乎不需要代码。简而言之，Keycloak的主要是为Web应用或者RESTful API提供SSO。
关于Keycloak的基础知识，你可以自己下载。网上有很多入门的教程，本篇直接从JavaScript Adapter着手，使用Vue框架进行keycloak的集成。
我们这里用的是Vue中的keycloak插件vue-keycloak-js。原本我打算用原生的JavaScript Adapter来实现，但是频繁遇到了跨域的问题。所以换成了vue-keycloak-js。插件的官方文档vue-keycloak-js
一、下载和安装
下载和安装vue-keycloak-js，推荐使用cnpm，npm下载速度略慢。
cnpm i --save @dsb-norge/vue-keycloak-js
二、引入和使用
首先需要引入vue-keycloak-js，如果你不是在App.vue中引入的话，那么还需要引入Vue。
import Vue from 'vue';
然后再引入vue-keycloak-js
import keycloak from '@dsb-norge/vue-keycloak-js';
Vue.use(keycloak , {
init: {
onLoad: 'login-required'
},
config: {
url: 'http://localhost:8080/auth',
realm: 'test',
clientId: 'test-realm'
},
onReady: (keycloak) => {
keycloak.loadUserProfile().success((data) => {
requestAuth;
console.log(data);
});
}
});
这里的on-load的参数有两个，一个是login-required，另一个是check-sso。login-required会检查你是否登录到了keycloak以及判断你登录的客户端是否正确，如果没有登录就跳转到keycloak的登录页面；check-sso只会判断你登录的客户端是否正确，如果没有登录就会保持未登录的状态。
因为我的项目中使用了Facade（门面模式），所以我需要在登录界面中引入keycloak。因此就不在App.vue中引入了。
1.全局刷新的token
我们知道引入keycloak之后token是会刷新的，几分钟就刷新一次。在Vue中发送HTTP请求都需要token，这个token通常是设置在axios的拦截器中。那么我们如何保证每次向后台发送HTTP请求的时候这个token都是最新的呢？这个问题我们可以使用vue-keycloak-js中内置的全局变量Vue.prototype.$keycloak.token。
在axios拦截器中我们可以这样写。
import Vue from 'vue';
......
config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}`
这样就能够保证每次发送请求中的token是最新的。注意千万不要在登录成功之后把token保存在浏览器当中，然后每次都获取这个浏览器中的token。在token失效之后这样的操作将无法刷新token。一点要按照上面的方法设置token。
2. 如何退出登录和获取用户信息
vue-keycloak-js提供了全局的$keycloak函数，我们可以用下面的方法退出keycloak
//获取用户信息可以使用
this.$keycloak.loadUserProfile()
//退出登录使用
this.$keycloak.logoutFn()
三、配置keycloak
通常来说，你看这篇文章之前应该已经配置好了keycloak。不过我在配置完js之后遇到了跨域问题。因此我在此处顺带说下。
首先需要添加一个域realm，这里的realm名称就是vue-keycloak-js的option中填写的realm。
然后在刚才添加的域下面添加一个客户端Client，这里的客户端ID名称就是vue-keycloak-js的option中填写的realm
编辑客户端，解决跨域问题。此处你应该在Web起源(Web origin)中填入你客户端的URL地址。我这里因为是测试效果，所以填了*，但是这是不安全的，建议你按需要配置。
