概要
相信很多像我一样初入门前端的时候，都是基于某个模板来学。 vue-element-admin 或者 vue-element-template是一个很好的模板。而在后期，一般公司都会要求接入SSO, 作者觉得这个太简单了，都是后台的工作，前端 只需判断后台返回的token或者其他信息就可以，所以在相关文档中也没有太多提及。相信仍有一部分人无从下手，所以在这里重新记录一下。
SSO
至于如果搭建SSO，这里不说，自行搜索。
我们用的SSO是基于： Apereo Central Authentication Service 5.3.9
假设搭建好的SSO地址是: https://sso.ekin.com
前端页面
基于vue-element-admin前端页面默认地址：http://localhost:9528
如果你用的是windows,可以更改hosts文件： 127.0.0.1 test.ekin.com，
这样前端页面地址是：http://test.ekin.com:9528
1. config.js文件
这个文件放于src/config/sysConfig.js,内容很简单，是两个地址：
'use strict'
var sysConfig = {
//sso address
casServerUrl: "https://sso.ekin.com",
//frontend address
sysDomain: "http://test.ekin.com:9528"
}
module.exports = sysConfig2. SSO.js文件
放于前端目录:src/utils/sso.js
import x2js from 'x2js'
import axios from 'axios'
const sysConfig = require('@/config/sysConfig')
import {
getToken,
setToken
} from '@/utils/auth'
import store from '../store'
import router from '../router'
const casServerUrl = sysConfig.casServerUrl
const sysDomain = sysConfig.sysDomain
const casLoginUrl = `${casServerUrl}/login`
export default {
enableCasAuth() {
const token = getToken()
if (token) {
return
}
if (this.isCasCallback()) {
const ticket = this.getTicket()
this.getAuthInfo(ticket).then(res => {
debugger
if (res.success) {
const user_id = res.username.__text
localStorage.setItem('name', user_id)
this.login(user_id)
} else {
this.toAuth()
}
})
} else {
this.toAuth()
}
},
toAuth() {
location.href = `${casLoginUrl}?service=${sysDomain}`
},
toIndex(path) {
location.href = sysDomain + '/#/' + path
},
getTicket() {
var reg = new RegExp('(^|&)ticket=([^&]*)(&|$)', 'i')
var r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2])
return null
},
getAuthInfo(ticket) {
return axios.get(`/cas/serviceValidate?service=${sysDomain}&ticket=${ticket}`).then(res => {
debugger
const x2j = new x2js()
var info = x2j.xml2js(res.data)
if (info.serviceResponse.authenticationSuccess) {
return {
'success': true,
'username': info.serviceResponse.authenticationSuccess.user
}
} else {
return {
'success': false,
'username': ''
}
}
})
},
isCasCallback() {
const url = window.location.href
return url.indexOf(sysDomain + '/?ticket=') != -1
},
logout() {
location.href = `${casServerUrl}/logout?service=${sysDomain}`
},
getUserByUserId(user_id) {
return axios.post(`http://[后台服务地址]/user/token?userCode=${user_id}`)
//返回的结构大概想这样：
// let data = {
// code: 1,
// token: 'admin-token'
// }
},
login(user_id) {
this.getUserByUserId(user_id)
.then(async (response) => {
const data = response.data
if (data.code === 1) {
setToken(data.token)
var token = data.token
axios.defaults.headers.common['token'] = getToken()
store.commit('user/SET_TOKEN', token)
// const {
// roles
// } = await store.dispatch('user/getInfo')
//为了方便，直接给予ADMIN权限
let roles = ['ADMIN']
const accessRoutes = store.dispatch('permission/generateRoutes', roles)
router.addRoutes(accessRoutes)
} else {
router.push({
path: '/401'
})
}
})
}
}3. 修改permission.js文件
引入sso.js
import cas from '@/utils/sso'
更改router.beforeEach
router.beforeEach(async (to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
// cut for breif
} else {
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
// next(`/login?redirect=${to.path}`)
// NProgress.done()
cas.enableCasAuth();
next();
NProgress.done();
}
}
})4. 修改vue.config.js文件
devServer: {
port: port,
open: true,
disableHostCheck: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:${port}/mock`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
//这个是我们加的
'/cas/serviceValidate': {
target: "https://sso.ekin.com",
changeOrigin: true,
pathRewrite: {
'/cas': ''
}
}
},
after: require('./mock/mock-server.js')
},5. 运行
这时应该就可以请求http://test.ekin.com:9528,然后会跳转的sso登陆页面，输入你的域帐号就能正常加载出网站页面。
上面涉及到的两个接口，是需要后台提供的：
- getUserByUserId
- getUserRoles
但这两个不想麻烦合并成一个就可以了，或者直接Mock数据返回就可以
到此这篇关于Vue-Element-Admin前端接入SSO的方法步骤的文章就介绍到这了,更多相关Vue-Element-Admin接入SSO内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
