3、Jeecg Boot 前端项目对接CAS步骤

Jeecg Boot前端加入对应代码，支持单点登录（这块已经做了封装，集成非常简单）思路： 前端vue层面判断登录状态，未登录直接在vue层面跳转到CAS服务器，CAS登录成功调回vue页面带着参数ticket，vue再用ticket进行模拟登录。

1、从网盘下载代码，拷贝到前端工程目录下

  1. 代码下载地址：
  2. 链接: https://pan.baidu.com/s/1uylDHry0WWgkEvvSqD8ITA 提取码: 6iya

2、下载代码解压后，把sso目录下代码拷贝到前端工程/src目录下

3、index.html页面增加CAS服务地址配置

该地址与第二步与后端对接时配置的地址一致

  1.   <script>
  2.     window._CONFIG = {};
  3.     window._CONFIG['casPrefixUrl'] = 'https://cas.test.com:8443/cas';
  4.   </script>

4、 src/store/modules/user.js文件中增加验证登录方法

（1）js引入

  1. import { getAction } from '@/api/manage'

(2)actions中增加如下方法

  1. // CAS验证登录
  2.     ValidateLogin({ commit }, userInfo) {
  3.       return new Promise((resolve, reject) => {
  4.         getAction("/cas/client/validateLogin",userInfo).then(response => {
  5.           console.log("----cas 登录--------",response);
  6.           if(response.success){
  7.             const result = response.result
  8.             const userInfo = result.userInfo
  9.             Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
  10.             Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
  11.             Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
  12.             commit('SET_TOKEN', result.token)
  13.             commit('SET_INFO', userInfo)
  14.             commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname, welcome: welcome() })
  15.             commit('SET_AVATAR', userInfo.avatar)
  16.             resolve(response)
  17.           }else{
  18.             resolve(response)
  19.           }
  20.         }).catch(error => {
  21.           reject(error)
  22.         })
  23.       })
  24.     },

（3）登出方法改造

  1. // 登出
  2.     Logout({ commit, state }) {
  3.       return new Promise((resolve) => {
  4.         let logoutToken = state.token;
  5.         commit('SET_TOKEN', '')
  6.         commit('SET_PERMISSIONLIST', [])
  7.         Vue.ls.remove(ACCESS_TOKEN)
  8.         //console.log('logoutToken: '+ logoutToken)
  9.         logout(logoutToken).then(() => {
  10.           resolve()
  11.         }).catch(() => {
  12.           resolve()
  13.         })
  14.       })
  15.     },

改造为：

  1. // 登出
  2.     Logout({ commit, state }) {
  3.       return new Promise((resolve) => {
  4.         let logoutToken = state.token;
  5.         commit('SET_TOKEN', '')
  6.         commit('SET_PERMISSIONLIST', [])
  7.         Vue.ls.remove(ACCESS_TOKEN)
  8.         //console.log('logoutToken: '+ logoutToken)
  9.         logout(logoutToken).then(() => {
  10.           var sevice = "http://"+window.location.host+"/";
  11.           var serviceUrl = encodeURIComponent(sevice);
  12.           window.location.href = window._CONFIG['casPrefixUrl']+"/logout?service="+serviceUrl;
  13.           //resolve()
  14.         }).catch(() => {
  15.           resolve()
  16.         })
  17.       })
  18.     },

5、改造src/main.js代码，增加如下代码

（1） 引入js

  1. import SSO from '@/sso/sso.js'

（2）改造下面代码

  1. new Vue({
  2.     router,
  3.     store,
  4.     mounted () {
  5.       store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
  6.       store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
  7.       store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
  8.       store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
  9.       store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
  10.       store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
  11.       store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
  12.       store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
  13.       store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
  14.       store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
  15.       store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,true))
  16.     },
  17.     render: h => h(App)
  18.   }).$mount('#app')

改造为：

  1. SSO.init(() => {
  2.   main();
  3. });
  4. function main() {
  5.   new Vue({
  6.     router,
  7.     store,
  8.     mounted () {
  9.       store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
  10.       store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
  11.       store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
  12.       store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
  13.       store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
  14.       store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
  15.       store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
  16.       store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
  17.       store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
  18.       store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
  19.       store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,true))
  20.     },
  21.     render: h => h(App)
  22.   }).$mount('#app')
  23. }

6、组织机构登录切换 src/components/tools/UserMenu.vue 增加 mounted()

  1. mounted(){
  2.       let depart = this.userInfo().orgCode;
  3.       if(!depart){
  4.         this.updateCurrentDepart();
  5.       }
  6.   },

以上步骤完成后，CAS对接完成，启动前端项目 访问http://localhost:3000 即可