一,先下载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. 算法学习—————数位dp

    记忆化搜索版,比较有套路 就根据杠杆数这道题来回忆一下 题目大致意思:选定大数中的某个数作为支点,使左右两边的力矩和相等,求区间内能满足条件的数的个数 首先一个大前提:对于一个满足条件的数来说,他的支 ...

  2. sass和less以及stylus的区别

    一.区别: 需要配置不同:Sass需要Ruby环境:Less需要引入less.js:Stylus需要安装node 使用语法不用:Sass变量使用$ ;Less变量使用@:stylus变量使用 属性名 ...

  3. 20230225 TI Electromagnetic compatibility testing methods and standards

    Hello, and welcome to the TI Precision Labs video, Introducing Electromagnetic Compliance Standard T ...

  4. uniapp记录

    1.uniapp获取imei imsi 型号 厂商 https://blog.csdn.net/qq_35620498/article/details/112172115

  5. wpf DataGrid相关总结

    1.去掉外边蓝框,设置BorderThickness="0"

  6. Python-celery介绍与快速上手

    1.celery介绍:   celery是一个基于Python开发的模块,可以帮助我们在开发过程中,对任务进行分发和处理.               详细介绍取自:Python之celery的简介与 ...

  7. mac Big Sur 安装MAT

    1.下载MAT,https://www.eclipse.org/mat/previousReleases.php,这里安装最新版本1.12.0版本,这个依赖jdk11,需要安装openjdk11,请前 ...

  8. 动态规划-3-RNA的二级结构

    /*状态转移方程: OPT(i , j)= max(OPT(i , j − 1) , max( 1+OPT(i , t − 1)+OPT(t + 1, j − 1))), where the  max ...

  9. centos 防火墙开放端口

    centos防火墙开放端口 开启防火墙 systemctl start firewalld 开放指定端口 firewall-cmd --zone=public --add-port=<PORT& ...

  10. Go实现KMP和Sunday算法

    KMP 1 func KMP(str, substr string) int { 2 if substr == "" { 3 return 0 4 } 5 strLen := le ...