KeyCloak for Vue

---

theme: hydrogen

创建一个Vue项目

npm create vite@latest

下载keycloak.js

cnpm i --save @dsb-norge/vue-keycloak-js

创建client

创建登录用户

创建后在此设置密码

在keycloak配置client

网址为本地vue项目地址

在vue中配置main.js

根据自己项目配置内容

``` import { createApp } from 'vue' import './style.css' import App from './App.vue' // 需要在mian.js中引入 import keycloak from '@dsb-norge/vue-keycloak-js'; // 第一种方法

createApp(App).use(keycloak , { init: { //是否定时校验登录状态，如果chrome版本大于86.x，请改为false。否则将导致浏览器重复刷新 checkLoginIframe: false, onLoad: 'login-required' }, config: { url: 'http://localhost:8080', realm: 'Demo', clientId: 'Vue' }, onReady: (keycloak) => { //获取用户的信息 keycloak.loadUserProfile().success((data) => { console.log(data); }); } });

createApp(App).mount('#app')

```

用户登录

如果session有缓存，先清除

点击网址登录：Vite + Vue

会跳转至登录页面： Sign in to Demo ，输入注册的账号和密码

进入成功，并且控制台会打印用户信息