3.JeecgBoot前端项目对接CAS步骤(2.3.0)
最后更新于：2022-04-02 07:21:50
3、Jeecg Boot 前端项目对接CAS步骤
===
> Jeecg Boot前端已经加入对应代码，支持单点登录（这块已经做了封装，集成非常简单）
> 思路： 前端vue层面判断登录状态，未登录直接在vue层面跳转到CAS服务器，CAS登录成功调回vue页面带着参数ticket，vue再用ticket进行模拟登录。
### 1、index.html页面增加CAS服务地址配置
该地址与第二步与后端对接时配置的地址一致
```
```
### 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)
})
})
},
```
';