一,先下载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. Delphi 新语法:For in语句

    据说Delphi 2005开始支持For in语句.并没有深入调查,依然从万一博客学习并整理. 一.遍历 TStrings var List: TStrings; s: string; begin L ...

  2. C#消息泵探索(一)

    ​消息泵 消息泵,又叫消息循环. 消息循环使用一个图形化用户界面下Microsoft Windows.具有GUI的Windows 程序是由事件驱动的.Windows为每个创建窗口的线程维护一个单独的消 ...

  3. 关于右值 std::move

    今天发现一个情况,对容器map 进行 std::move 之后,原map被清空了.     map<int, int> tmp;     tmp[1] = 1;     tmp[2] = ...

  4. 异步串口通信协议--UART

    UART(通用异步收发传输器)将由计算机内部传送过来的并行数据转换为输出的串行数据流.将计算机外部来的串行数据转换为字节,供计算机内部使用并行数据的器件使用. 在输出的串行数据流中加入奇偶校验位,并对 ...

  5. Navicate破解安装

    1.安装Navicate客户端     2. 注意安装完毕不要打开navicate,打开后后面可能出现rsa public key not found之类的错误,直接点击注册机,选择版本,点击patc ...

  6. Freertos stack-overflow 检测

    (出现的地址信息没有特定意义,仅供参考) vApplicationStackOverflowHook() at rtos.c:371 0x55aa vTaskSwitchContext() at ta ...

  7. sql 时间

    sql拿两天之内的时间 SELECT * FROM room_message WHERE send_date BETWEEN UNIX_TIMESTAMP( now())-172800 AND now ...

  8. Windows 10更新报错 0x8000ffff

    Windows 10更新报错 0x8000ffff - Microsoft Community 那么您可用 "Windows 10 覆盖安装" 来修复,可参考以下步伐,连接里有视频 ...

  9. 统计学习导论之R语言应用(二):R语言基础

    统计学习导论(ISLR) 参考资料 The Elements of Statistical Learning An Introduction to Statistical Learning 统计学习导 ...

  10. Github快速访问

    Github快速访问 1. 国内访问github慢     github是国外网站,用国内的网络很难访问到,也就无法使用github,作为程序猿的我们,无法使用github可太难受了,那么我们有什么办 ...