一,先下载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. react hooks组件父组件调用子组件方法

    函数组件父组件调用子组件方法需要使用 useImperativeHandle 和 forwardRef 两个方法 1.子组件 2.父组件 注意:一定要使用ref来接从子组件传过来的实例值,用其他的在函 ...

  2. 调度器46—tick模式

    一.tick简介 tick就是一个周期性的中断,周期通过 CONFIG_HZ 进行配置,一般常取值为100Hz.250Hz.1000Hz.Tick 每秒窃取CPU 100 到 1000 次,导致Ica ...

  3. Golang-Study

    Golang-Study-Note 参考教程视频:狂神说 https://www.bilibili.com/video/BV1ae41157o9?p=1&vd_source=793668372 ...

  4. centos7.6 dokcer-compose在线和离线安装

    在线安装可参考官网文档:https://docs.docker.com/compose/install/#install-compose curl -SL https://github.com/doc ...

  5. 查看Windows操作系统编码方式

    chcp 编码表: 代码页 国家(地区)或语言 437 美国 708 阿拉伯文(ASMO 708)720 阿拉伯文(DOS)850 多语言(拉丁文 I) 852 中欧(DOS) - 斯拉夫语(拉丁文 ...

  6. ssh远程连接服务器

    远程连接服务器及压缩文件与解压 1 终端连接 ssh -p 端口号 用户名@地址 例如:ssh -p 80 name@host 每次远程连接,使用账号和密码登录,有可能使得端口被监听到,从而导致挖矿情 ...

  7. SVNKit使用相关工具类

    SVNKit操作SVN仓库 导入依赖 <dependency> <groupId>org.tmatesoft.svnkit</groupId> <artifa ...

  8. Ubuntu查看系统服务

    Linux服务是Linux系统非常重要的一环,查看服务,需要用到chkconfig工具,然而在Ubuntu 12.0版本,却没有查找到此命令. 查询stackOverflow获取了正确答案,对于Ubu ...

  9. RTT笔记-分析自动初始化机制转

    首先全局搜索一个任意的自启动宏,便能找到在rtdef.h中由如下定义 1 #define INIT_BOARD_EXPORT(fn) INIT_EXPORT(fn, "1") 2 ...

  10. Ngrinder 制作脚本-(二)

    接上一篇文章:了解了Ngrinder的介绍和工作原理之后,相信大家都想着怎么使用这款工具进行性能测试 一.Ngrinder-Controller 的安装 环境要求: (1)jdk1.8以上 (2)Ja ...