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.js
      onLoad: '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会被重建,然后权限又重新初始化。随后用户就被踢出到登录页了。登录后内部按钮路由都没问题,只要刷新浏览器就会被踢出。

- 完成 -

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

VMware Esxi安装群辉系统

群晖的网络存储产品具有强大的操作系统,提供了各种应用程序和服务,包括文件共享、数据备份、多媒体管理、远程访问等。用户可以通过简单直观的界面来管理他们的存储设备,并且可以根据自己的需求扩展设备的功能。总的来说,群晖的产…

概念科普|大模型它到底是什么?

一、引言 ChatGPT、Open AI、大模型、提示词工程、Token、幻觉等人工智能的黑话,在2023年这个普通却又神奇的年份里,反复的冲刷着大家的认知。让一部分人彻底躺平的同时,让另外一部分人开始焦虑起来,生怕在这个人工智能的奇迹之年…

鸡乐盒网页版

前端时间鸡乐盒比较火,当时跟着做了一款鸡乐盒,同时拥有聊天以及音乐播放器功能 链接: 鸡乐盒https://www.jaron.top/app/xiana/pages/musicBox/musicBox

C语言---浮点数在内存中的存储

前面跟大家介绍了整数在内存中的存储,这次再向大家介绍下浮点数在内存中的存储。 我们常见的浮点数有3.14,1E10 等等,浮点数家族包括float,double,long double类型。 浮点数的表示范围在头文件 float.h 定义。 1.浮…

代码随想录算法训练营第二十九天(回溯5)|491. 非递减子序列、46. 全排列、47. 全排列 II(JAVA)

文章目录 491. 非递减子序列解题思路源码 46. 全排列解题思路源码 47. 全排列 II解题思路源码 总结 491. 非递减子序列 给你一个整数数组 nums ,找出并返回所有该数组中不同的递增子序列,递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 …

探索未来游戏:生成式人工智能AI如何重塑你的游戏世界?

生成式人工智能(Generative AI)正以前所未有的速度改变着各行各业的运作模式。其中,游戏产业作为科技应用的前沿阵地,正经历着前所未有的变革。本文将探讨生成式人工智能如何重塑游戏产业,以及这一变革背后的深远影响。…

博士推荐 | 拥有超过10年的数据解决方案经验,数据驱动的决策者

编辑 / 木子 审核 / 朝阳 伟骅英才 伟骅英才致力于以大数据、区块链、AI人工智能等前沿技术打造开放的人力资本生态,用科技解决职业领域问题,提升行业数字化服务水平,提供创新型的产业与人才一体化服务的人力资源解决方案和示范平台&#x…

评估精益管理培训的有效性需要收集哪些数据?

近年来,企业纷纷寻求通过精益管理培训来提升效率和竞争力。然而,精益管理培训是否真正有效,能否为企业带来实实在在的改变,这是许多管理者和决策者关心的问题。为了回答这个问题,我们需要收集一系列关键数据来评估精益…

基于 OpenHarmony PrecentPositionLayout 开发指南

1. PrecentPositionLayout 功能介绍 1.1. 组件介绍: 鸿蒙 SDK 提供了不同布局规范的组件容器,例如以单一方向排列的 DirectionalLayout、以相对位置排列的DependentLayout、以确切位置排列的 PositionLayout 等。 但是 PositionLayout 中组件的位置是…

基于单片机收音机调幅系统设计仿真源码

**单片机设计介绍,基于单片机收音机调幅系统设计仿真源码 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机收音机调幅系统设计的仿真源码,主要实现了通过单片机控制调幅收音机的核心功能。以下是…

C++ | Leetcode C++题解之第16题最接近的三数之和

题目&#xff1a; 题解&#xff1a; class Solution { public:int threeSumClosest(vector<int>& nums, int target) {sort(nums.begin(), nums.end());int n nums.size();int best 1e7;// 根据差值的绝对值来更新答案auto update [&](int cur) {if (abs(cur…

城市郊野公园“风筝节”视频智能识别技术安全监管方案

一、方案背景 四月天气十分舒适&#xff0c;微风拂面&#xff0c;这段时间也是游客前往户外放风筝的好时机&#xff0c;很多城市都举办了“风筝节”等活动&#xff0c;尤其是在周末节假日期间&#xff0c;城市各个郊野公园的游客量逐渐暴增。然而&#xff0c;随着参与人数的增…

C++ 十进制转十六进制

文章目录 toHexString(int n) 函数&#xff0c;输入整型数字n&#xff0c;返回 字符串string类。 #include <iostream> #include <string> #include <vector> #include <math.h> using namespace std;string toHexString(int n) {vector <int> …

CICD流水线 发布应用到docker镜像仓库

准备工作 1.先注册免费的镜像仓库 复制链接: https://cr.console.aliyun.com/cn-beijing/instances 实施 1. 新建流水线&#xff0c;选择模板 2.添加流水线源&#xff0c;及是你的代码仓库, 选择对应分支. 3.代码检查以及单元测试&#xff0c;这个步骤可以不用动它. 4. …

Java学习笔记23(面向对象三大特征)

1.5 多态 ​ *多态(polymorphic) ​ *方法或对象具有多种形态&#xff0c;是面向对象的第三大特征&#xff0c;多态是建立在封装和继承基础之上的 1.多态的具体体现 1.方法的多态 &#xff08;重写和重载体现了多态&#xff09; 2.对象的多态 ​ 1.一个对象的编译类型和…

如何魔改 diffusers 中的 pipelines

如何魔改 diffusers 中的 pipelines 整个 Stable Diffusion 及其 pipeline 长得就很适合 hack 的样子。不管是通过简单地调整采样过程中的一些参数&#xff0c;还是直接魔改 pipeline 内部甚至 UNet 内部的 Attention&#xff0c;都可以实现很多有趣的功能或采样生图结果。 本…

如何编写一份完整的软件测试报告

软件测试是软件开发过程中一个非常重要的环节&#xff0c;它有助于确保软件的质量和稳定性。编写一份完整的软件测试报告是软件测试工作的重要组成部分&#xff0c;它不仅可以帮助测试团队记录测试结果和发现的问题&#xff0c;还可以为开发团队提供有价值的反馈和改进建议。下…

我独自升级崛起下载慢/下载不了/无法下载的解决方法

我独自升级是一款RGP游戏&#xff0c;以充满独特的画风以及新的类型的挑战得到玩家们的喜爱。通过打怪、完成任务、参加活动等方式获得经验值&#xff0c;合理分配技能点数和属性点数&#xff0c;以适应不同阶段的挑战需求。掌握装备掉落、合成、升级机制&#xff0c;及时更换更…

ubuntu安装nginx以及开启文件服务器

1. 下载源码 下载页面&#xff1a;https://nginx.org/en/download.html 下载地址&#xff1a;https://nginx.org/download/nginx-1.24.0.tar.gz curl -O https://nginx.org/download/nginx-1.24.0.tar.gz2. 依赖配置 sudo apt install gcc make libpcre3-dev zlib1g-dev ope…

中药提取物备案数据库<5000+中药提取物>

NMPA中药提取物备案数据库的建立是确保中药提取物质量安全、规范生产行为、加强监管、保障公众用药安全、促进产业发展和国际化的重要措施。 通过查询中药提取物备案信息我们能了解到中药提取物的实用备案号、药品通用名称、药品生产企业、批准文号、备案日期、备案状态、中药…