keycloak - 鉴权VUE

目录

一、前言

1、背景

2、实验版本

二、开始干活

1、keycloak配置

a、创建领域(realms)

b、创建客户端

c、创建用户、角色

2、vue代码

a、依赖

b、main.js

三、未解决的问题

目录

一、前言

1、背景

2、实验版本

二、开始干活

1、keycloak配置

a、创建领域(realms)

b、创建客户端

c、创建用户、角色

2、vue代码

a、依赖

b、main.js

c、关于跨域

三、未解决的问题



一、前言

1、背景

keycloak 官方提供了javaScript鉴权的sdk

Securing Applications and Services Guideicon-default.png?t=N7T8https://www.keycloak.org/docs/24.0.2/securing_apps/#_javascript_adapter同时,vue也封装了这个官方sdk
@dsb-norge/vue-keycloak-js
我们使用这个vue封装的鉴权sdk做实验

2、实验版本

vue:vue3

keycloak: 18.0.2

keycloak-js:18.0.0

@dsb-norge/vue-keycloak-js: 2.4.0

二、开始干活

1、keycloak配置

a、创建领域(realms)

b、创建客户端

留意框红的三处,重定向地址要写vue的地址 

c、创建用户、角色

2、vue代码

a、依赖

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

b、main.js

main.js 中的 app 代码如下
 

import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'app.use(VueKeycloakJs, {init: {// Use 'login-required' to always require authentication// If using 'login-required', there is no need for the router guards in router.jsonLoad: 'login-required',checkLoginIframe: false// silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html"},config: {url: 'http://127.0.0.1:8080', //keyclock地址clientId: 'user_login_client',realm: 'user_login'},onReady (keycloakInstance) {store.dispatch('saveAppInstance', app);keycloakInstance.loadUserProfile().success((data) => { console.log("用户data",data);     })app.$keycloak = keycloakInstance;sessionStorage.setItem('token', keycloakInstance.token);}})

c、关于跨域

关于跨域问题,我采用在vue的 vue.config.js 中配置代理解决。即vue代理keycloak地址

三、未解决的问题

未解决的问题就是登录后,在刷新浏览器时,app会被重建,然后权限又重新初始化。随后用户就被踢出到登录页了。登录后内部按钮路由都没问题,只要刷新浏览器就会被踢出。

- 完成 -

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/796818.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL Server详细安装使用教程

1.安装环境 现阶段基本不用SQL Server数据库了,看到有这样的分析话题,就把多年前的存货发一下,大家也可以讨论看看,思路上希望还有价值。 SQL Server 2008 R2有32位版本和64位版本,32位版本可以安装在Windows XP及以上…

PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)

🥇作者简介:CSDN内容合伙人、新星计划第三季Python赛道Top1 🔥本文已收录于Python系列专栏: 零基础学Python 💬订阅专栏后可私信博主进入Python学习交流群,进群可领取Python视频教程以及Python相关电子书合…

如何在Python中将HTML实体代码转换为文本

在处理HTML数据时&#xff0c;有时会遇到HTML实体代码&#xff0c;这些代码是为了在HTML中表示特殊字符而使用的。例如&#xff0c;<表示小于符号(<)&#xff0c;>表示大于符号(>)&#xff0c;&表示和符号(&)等等。那么当我们在实际操作中可能会遇到下面的…

ebpf+perfetto实现调度延迟记录与展示

1.背景 需要分析生产环境的调度问题,如线程的调度延迟有多少,在哪些时间点延迟比较明显,影响其调度的主要原因是什么?其次,我们希望可以比较直观的展示调度延迟情况。最好能对接perfetto的UI和后处理,因为perfetto已经用于分析比较多的性能数据,可以和调度数据进行整合.我们…

吴恩达:AI 智能体工作流

热门文章推荐&#xff1a; &#xff08;1&#xff09;《为什么很多人工作 3 年 却只有 1 年经验&#xff1f;》&#xff08;2&#xff09;《一文掌握大模型提示词技巧&#xff1a;从战略到战术巧》&#xff08;3&#xff09;《AI 时代&#xff0c;程序员的出路在何方&#xff1…

RGB三通道和灰度值的理解

本文都是来自于chatGPT的回答!!! 目录 Q1:像素具有什么属性?Q2:图像的色彩是怎么实现的?Q3:灰度值和颜色值是一个概念吗?Q4:是不是像素具有灰度值&#xff0c;也有三个颜色分量RGB&#xff1f;Q5:灰度图像是没有色彩的吗&#xff1f;Q6: 彩色图像是既具有灰度值也具有RGB三…

简历复印--原型模式

1.1 夸张的简历 简历的打印。"对编程来说&#xff0c;简单的复制粘贴极有可能造成重复代码的灾难。我所说的意思你根本还没听懂。那就以刚才的例子&#xff0c;我出个需求你写写看&#xff0c;要求有一个简历类&#xff0c;必须要有姓名&#xff0c;可以设置性别和年龄&am…

web自动化测试系列-如何选择实战项目(四)

目录 1.项目安装 2.项目优点 3.项目介绍 3.1 项目介绍 3.3 商品展示 接上文 &#xff1a;web自动化测试系列-页面元素该如何定位?(三)-CSDN博客 在后续的技术操作中都将会使用到项目 &#xff0c;如果你有自己的练手项目 &#xff0c;优先拿自己的项目做练习&#xff0c…

【话题】如何看待那些速成并精通软件书籍的神器

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 背景1. 神话与现实1.1 理论与实践之间的鸿沟1.2 一劳永逸的错觉 2. 速成书籍的优势与局限2.1 优势&#xff1a;2.2 局限&#xff1a; 3. 如何有效利用速成书籍3.1 量力而…

算法——链表(1)

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 小比特 大梦想 此篇文章与大家分享链表专题的第一部分 如果有不足的或者错误的请您指出! 1.链表常用技巧总结 1.1引入虚拟头结点 在力扣上,基本提供的链表题目都是"无头的",但是针对无头链表,我们最…

【话题】程序员35岁会失业吗?

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 背景招聘分析一、技术更新换代的挑战二、经验与技术的双重优势三、职业发展的多元化选择四、个人成长与职业规划的平衡五、结语文章推荐 背景 35岁被认为是程序员职业生…

数据治理与大数据平台解决方案(免费|可下载)

1、知识星球下载&#xff1a; 如需下载完整PPTX可编辑源文件&#xff0c;请前往星球获取&#xff1a;https://t.zsxq.com/191Y7dD3p 2、免费领取步骤&#xff1a; 【1】关注公众号 方案驿站 【2】私信发送 数据治理与大数据平台 【3】获取本方案PDF下载链接&#xff0c;直接…

007 CSS的继承和层叠 元素特性

文章目录 CSS属性的继承CSS属性的层叠选择器的权重 HTML元素的类型编写HTML注意事项元素隐藏方法CSS属性-overflowCSS样式不生效可能原因 CSS属性的继承 如果一个属性具备继承性&#xff0c;那么在该元素上设置后&#xff0c;它的后代元素都可以继承这个属性 如果后代元素自己…

2023年度总结:允许迷茫,破除迷茫;专注自身,把握当下

0、前言 &#x1f4dc;为什么24年已经过了几个月&#xff0c;才提笔写这年度总结呢&#xff1f;毫不羞愧直问我的内心&#xff0c;其实就是懒罢了。直到前几天朋友看到了我去年写的总结&#xff0c;我自己点进那篇总结&#xff0c;完完整整的看了一遍&#xff0c;又翻看我23年…

C语言 | Leetcode C语言题解之第12题整数转罗马数字

题目&#xff1a; 题解&#xff1a; const char* thousands[] {"", "M", "MM", "MMM"}; const char* hundreds[] {"", "C", "CC", "CCC", "CD", "D", "DC"…

Vue2(完结):replace属性、编程式路由导航、缓存路由组件、两个新钩子、路由守卫、history与hash

一、router-link的replace属性 1、作用&#xff1a;控制路由跳转时操作浏览器历史记录的模式 2、浏览器的历史记录有两种写入方式&#xff1a;分别为push和replace&#xff0c;push是追加历史记录&#xff0c;replace是替换当前记录。路由跳转时候默认为push 3、如何开启repla…

敏感信息泄露漏洞

法律声明 参与培训需要遵守国家法律法规&#xff0c;相关知识只做技术研究&#xff0c;请勿用于违法用途&#xff0c;造成任何后果自负与本人无关。 中华人民共和国网络安全法&#xff08;2017年6月1日起施行&#xff09; 第二十二条 任何个人和组织不得从事入侵他人网络、干扰…

C——找单身狗2

题目内容&#xff1a; 在一个数组中&#xff0c;室友两个数字出现了一次&#xff0c;其他所有数字都出现了两次。找出只出现一次的数字。 如&#xff1a;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff…

【云计算】云数据中心网络(一):VPC

云数据中心网络&#xff08;一&#xff09;&#xff1a;VPC 1.什么是 VPC2.VPC 的组成2.1 虚拟交换机2.2 虚拟路由器 3.VPC 网络规划3.1 VPC 数量规划3.2 交换机数量规划3.3 地址空间规划3.4 不同规模企业地址空间规划实践 4.VPC 网络高可靠设计4.1 单地域单可用区部署4.2 单地…

【Vue3】自定义Modal的fixed无效

现有一个模态框&#xff0c;目前一切正常&#xff0c;Modal可以在视口正确位置展示 <template><div class"father"><h3>模态框的父组件</h3><button click"showModal !showModal">显示/隐藏modal</button><div …