一,先下载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. 05 Java 数组

    Java 数组 一.什么是数组 数组是相同类型数据的有序集合 数组描述的是相同类型的若干个数据,按照一定的顺序排列组合而成 其中每一个数据称为数组元素,每个数组元素可以通过下标来访问它们 二.数组的声 ...

  2. Linux下clang、gcc、intel编译器最新版本安装笔记

    转自 http://t.zoukankan.com/opangle-p-2838554.html

  3. 小程序Excel导入导出数据库功能

    https://blog.csdn.net/yhcad/article/details/116204444 unit Umain;interfaceuses  Winapi.Windows, Wina ...

  4. 百题计划-6 codeforces 651 div2 E. Binary Subsequence Rotation 01序列集合划分,2个队列处理

    https://codeforces.com/contest/1370/problem/E 队列元素以末尾字符为结尾的序列就好了,这里队列里的元素不重要,队列size重要 #include<bi ...

  5. openssl的自签名证书不被信任问题

    1.不同的浏览器安全策略不同 1.1谷歌系的会提示没有绑定域名. 此服务器无法证实它就是 192.168.0.127 - 它的安全证书没有指定主题备用名称(Subject Alternative Na ...

  6. DataTable操作汇总

    1.排序 DataTable dt = new DataTable(); dt.Columns.Add("Name"); dt.Columns.Add("Age" ...

  7. JavaScript 基础学习(二)

    JavaScript 基础学习(二) instanceof方法: var s = "hello"; var i = 8; //typeof 只能判断基本数据类型 alert(typ ...

  8. Finance财务软件(月度结转专题)

    支持按模板结转 默认结转模板 1.结转收入 借: 6001 主营业务收入 6051 其他业务收入 6301 营业外收入 贷: 4103 本年利润 2.结转成本.费用和税金 借: 4103 本年利润 贷 ...

  9. ComPiler200003:Story-Oriented Programming

    Story-Oriented Programming MAY 25TH, 2018 http://www.brandonkeown.com/2018/05/story-oriented-program ...

  10. CSP2022 J2参考解析

    目录 P8813 [CSP-J2022] 乘方 P8814 [CSP-J2022] 解密 P8815 [CSP-J2022] 逻辑表达式 P8816 [CSP-J2022] 上升点列 题目传送: P8 ...