Vue-Element-Admin接入SSO Vue-Element-Admin前端接入SSO的方法步骤
kielin 人气:0想了解Vue-Element-Admin前端接入SSO的方法步骤的相关内容吗,kielin在本文为您仔细讲解Vue-Element-Admin接入SSO的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue-Element-Admin接入SSO,Vue-Element-AdminSSO,下面大家一起来学习吧。
概要
相信很多像我一样初入门前端的时候,都是基于某个模板来学。 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 = sysConfig
2. 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 { /* has no token*/ 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数据返回就可以
加载全部内容