3.JeecgBoot前端項目對接CAS步驟(2.3.0) · JeecgBoot 開發文檔

3、Jeecg Boot 前端項目對接CAS步驟 === > Jeecg Boot前端已經加入對應代碼，支持單點登錄（這塊已經做了封裝，集成非常簡單） > 思路：前端vue層面判斷登錄狀態，未登錄直接在vue層面跳轉到CAS服務器，CAS登錄成功調回vue頁面帶著參數ticket，vue再用ticket進行模擬登錄。 ### 1、index.html頁面增加CAS服務地址配置該地址與第二步與后端對接時配置的地址一致 ``` <script> window._CONFIG = {}; window._CONFIG['casPrefixUrl'] = 'https://cas.test.com:8443/cas'; </script> ``` ### 2、 src/store/modules/user.js文件中增加驗證登錄方法（1）登出方法改造 ``` // 登出 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(() => { resolve() }).catch(() => { resolve() }) }) }, ``` 改造為： ``` // 登出 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() }) }) }, ``` ### 3、改造src/main.js代碼，增加如下代碼（1）引入js ``` import SSO from '@/cas/sso.js' ``` （2）改造下面代碼 ``` new Vue({ router, store, mounted () { store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true)) store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme)) store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout)) store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader)) store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar)) store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth)) store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader)) store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak)) store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor)) store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN)) store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,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)) store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme)) store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout)) store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader)) store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar)) store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth)) store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader)) store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak)) store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor)) store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN)) store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,true)) }, render: h => h(App) }).$mount('#app') } ``` ### 4、組織機構登錄切換 src/components/tools/UserMenu.vue 增加 mounted() ``` mounted(){ let depart = this.userInfo().orgCode; if(!depart){ this.updateCurrentDepart(); } }, ``` 以上步驟完成后，CAS對接完成，啟動前端項目訪問http://localhost:3000 即可 ***** ~~### 附錄：老版本集成步驟，下面步驟作廢~~ > JeecgBoot最新版本，默認帶CAS代碼，可以忽略下面步驟 > #### 1、從網盤下載代碼，拷貝到前端工程目錄下 ``` 代碼下載地址：鏈接: https://pan.baidu.com/s/1uylDHry0WWgkEvvSqD8ITA 提取碼: 6iya ``` #### 2、下載代碼解壓后，把sso目錄下代碼拷貝到前端工程/src目錄下 ### 3、 src/store/modules/user.js文件中增加驗證登錄方法（1）js引入 ``` import { getAction } from '@/api/manage' ``` (2) actions中增加如下方法 ``` // CAS驗證登錄 ValidateLogin({ commit }, userInfo) { return new Promise((resolve, reject) => { getAction("/cas/client/validateLogin",userInfo).then(response => { console.log("----cas 登錄--------",response); if(response.success){ const result = response.result const userInfo = result.userInfo Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000) commit('SET_TOKEN', result.token) commit('SET_INFO', userInfo) commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname, welcome: welcome() }) commit('SET_AVATAR', userInfo.avatar) resolve(response) }else{ resolve(response) } }).catch(error => { reject(error) }) }) }, ```