![单点登录流程图](https://img.kancloud.cn/17/0a/170a30ab167dbe632b1b709daff0f893_1323x713.png) **单点登录 准备4个项目** 1.前端vue项目 2.cloud中的一个服务,在jeecg中为system项目,作为单点登录的客户端 3.overlay项目,作为单点登录的服务端,需打成war包放到tomcat上 4.cas-db项目,用来验证登录用户信息,springboot项目,直接启动application或者打成jar ---- *正常下载的开源项目,不具备单点登录的功能,需要修改代码:* ## 1.前端项目修改: ### 1-1、index.html页面增加CAS服务地址配置 ``` <script> window._CONFIG = {}; //此地址指向单点登录的服务端,端口号和overlay项目配置保持一致 window._CONFIG['casPrefixUrl'] = 'https://cas.test.com:8888/cas'; </script> ``` ### 1-2、 修改src/store/modules/user.js文件中的Logout ~~~ // 登出 Logout({ commit, state }) { return new Promise((resolve) => { let logoutToken = state.token; commit('SET_TOKEN', '') commit('SET_PERMISSIONLIST', []) Vue.ls.remove(ACCESS_TOKEN) //console.log('logoutToken: '+ logoutToken) logout(logoutToken).then(() => { //其实就是加了以下三行代码 var sevice = "http://"+window.location.host+"/"; var serviceUrl = encodeURIComponent(sevice); window.location.href = window._CONFIG['casPrefixUrl']+"/logout?service="+serviceUrl; //resolve() }).catch(() => { resolve() }) }) }, ~~~ ### 1-3、改造src/main.js代码,增加如下代码 (1) 引入js ``` import SSO from '@/cas/sso.js' ``` (2)改造下面代码,就是将new vue的代码移到一个方法里面,在调用sso.init之后,调用该方法,初始化vue实例 ``` new Vue({ router, store, mounted () { store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true)) //.......此处省略大部分代码 }, render: h => h(App) }).$mount('#app') ``` 改造为: ``` SSO.init(() => { main(); }); function main() { new Vue({ router, store, mounted () { store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true)) //.......此处省略大部分代码,和原来保持一致 }, render: h => h(App) }).$mount('#app') } ``` ### 1-4、组织机构登录切换 src/components/tools/UserMenu.vue 增加 mounted() ``` mounted(){ let depart = this.userInfo().orgCode; if(!depart){ this.updateCurrentDepart(); } }, ``` ------- ## 2.cloud项目修改: ### system项目的 application.yml 增加如下配置,若已集成nacos配置中心,就去修改nacos上的配置 ``` cas: # 配置CAS服务地址 prefixUrl: https://cas.test.com:8888/cas ``` 最后, 检查overlay项目的端口配置是否和system项目及前端配置的一致 检查overlay项目认证用户信息的请求地址配置是否和cas-db项目一致 --- 以上步骤完成后,CAS对接完成,启动4个项目 访问http://localhost:3000 即可