一,先下载vuekeycloakjs

npm install @dsb-norge/vue-keycloak-js --save

二,引入

import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'

三,进行配置(里面的配置项需要在keycloak后台管理里面配置)

Vue.use(VueKeycloakJs, {
init: {
onLoad: "login-required",
checkLoginIframe: false//防止登陆后重复刷新
    },
config: {
url: process.env.VUE_APP_SSO_URL,
realm: process.env.VUE_APP_REALM,
clientId: process.env.VUE_APP_CLIENTID
},
onReady: keycloak => {
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
}
});

四,应用

<span>{{$keycloak.token}}</span>
<span>{{$keycloak.username}}</span>
<span @click="$keycloak.logoutFn">退出</span> 

<span @click="$keycloak.accountManagement">个人信息管理</span> //修改密码用户名

//js中放token
var token=`${Vue.prototype.$keycloak.token}`

vue中sso登录使用VueKeycloak登录的更多相关文章

  1. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  2. SSO之CAS单点登录实例演示

    本文目录: 一.概述 二.演示环境 三.JDK安装配置 四.安全证书配置 五.部署CAS-Server相关的Tomcat 六.部署CAS-Client相关的Tomcat 七. 测试验证SSO 一.概述 ...

  3. SSO之CAS单点登录详细搭建教程

    本教程是我个人编写,花费几个小时的时间,给需要学习的人员学习使用,希望能帮助到你们. [环境说明]:本文演示过程在同一个机器上的(也可以在三台实体机器或者三个的虚拟机上),环境如下: windows7 ...

  4. SSO基于cas的登录

    概念介绍 1.定义 CAS ( CentralAuthentication Service ) 是 Yale 大学发起的一个企业级的.开源的项目,旨在为 Web 应用系统提供一种可靠的单点登录解决方法 ...

  5. vue组件父与子通信-登录窗口

    一.组件间通信(父组件    -->  子组件)步骤:①父组件在调用子组件 传值 <child-component myValue="123"> </chi ...

  6. 基于Vue、Springboot网站实现第三方登录之QQ登录,以及邮件发送

    基于Vue.Springboot实现第三方登录之QQ登录 前言 一.前提(准备) 二.QQ登录实现 1.前端 2.后端 1.application.yml 和工具类QQHttpClient 2.QQL ...

  7. SharePoint 2013中以其他用户身份登录的WebPart(免费下载)

    在SharePoint 2013中微软并没有提供在SharePoint 2010中以其他用户身份登录的菜单,这对一般用户影响不大,但对于系统管理员或测试人员或特定人员(如在OA系统中的文员或秘书,常常 ...

  8. sql server2008中sql server身份能登录,window身份登录不了

    用sql server身份的sa登录成功进入,一切正常,用window身份登录不了,问题如下

  9. 系统开发中按下Enter键登录系统

    转载来自:http://www.jb51.net/article/54308.htm 系统开发中按下Enter键登录系统,即就是监听键盘,当按下Enter键后调用登录按钮的click()事件. JS方 ...

  10. ecshop的模板文件中如何判断用户是否登录

    ecshop中对于smarty的运用和改造有很大的值得借鉴的地方,在dwt模板文件中可以直接判断用户是否登录,现在有规定,凡是只展示不销售的电商平台,一律不得展示商品价格,但可以在用户登录后显示. & ...

随机推荐

  1. 》》》Java利用aspose-words将word文档转换成pdf(破解 无水印)

    参考转载:Java利用aspose-words将word文档转换成pdf(破解 无水印) (bbsmax.com) 1.引入 aspose.words 包2.添加解水印 license.xml3.写业 ...

  2. (1028) 权限,chmod、chgrp、chown详解

    https://www.cnblogs.com/Berryxiong/p/6193866.html 例1: $ chgrp - R book /opt/local /book 改变/opt/local ...

  3. SAP S/4HANA Cloud的功能亮点以及大中型企业为何更倾向选择它

    SAP-System Applications and Products,是一家来自德国的大型跨国软件公司,成立于1972年.作为全球企业管理和协同化商务解决方案供应商,世界第三大独立软件供应商和全球 ...

  4. 5_Java对象

    面向对象编程 对于描述复杂的事物,为了从宏观上把握,从整体上合理分析,我们需要使用面向对象的思路来分析整个系统.但是,具体到微观操作,仍然需要面向过程的思路去处理. 面向对象编程(Object-Ori ...

  5. 国产DP4344兼容替代CSM4344 192K双通道输出数模转换芯片

    DP4344 是一款完整的 2 通道输出数模转换芯片, 内含插值滤波器.Multi-Bit 数模转换器.输出模 拟滤波器,并支持大部分的音频数据格式.DP4344 基于一个带线性模拟低通滤波器的四阶 ...

  6. SMW0 对应 MIME TYPE 无法包进请求上传

    SAP Notes - SAP for Me 2228060 - SMW0 Key entry for table MIMETYPES may only be generic Resolution S ...

  7. 1168 Prime Day(20)

    The above picture is from Sina Weibo, showing May 23rd, 2019 as a very cool "Prime Day". T ...

  8. uniapp 扫描

    借鉴链接:https://blog.csdn.net/qq_33165549/article/details/89879435 1.扫描页面 <template> <view> ...

  9. openwrt通过gre回源

    创建  ip tunnel add GRE网卡名 mode gre local 本地LAN IP remote SERVER LAN IP ttl 255  ip link set GRE网卡名 up ...

  10. Rust字符串处理

    Trim移除字符串开始末尾的字符串 fn main() { let s = " Hello Rust! "; // trim移除字符串开始末尾的空格 // "Hello ...