快捷導(dǎo)航

Vue-Element-Admin前端接入SSO的方法步驟

更新時(shí)間：2022年04月28日 09:31:54 作者：kielin

本文主要介紹了Vue-Element-Admin前端接入SSO的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

概要

相信很多像我一樣初入門前端的時(shí)候，都是基于某個(gè)模板來學(xué)。 vue-element-admin 或者 vue-element-template是一個(gè)很好的模板。而在后期，一般公司都會(huì)要求接入SSO, 作者覺得這個(gè)太簡(jiǎn)單了，都是后臺(tái)的工作，前端只需判斷后臺(tái)返回的token或者其他信息就可以，所以在相關(guān)文檔中也沒有太多提及。相信仍有一部分人無從下手，所以在這里重新記錄一下。

SSO

至于如果搭建SSO，這里不說，自行搜索。
我們用的SSO是基于： Apereo Central Authentication Service 5.3.9
假設(shè)搭建好的SSO地址是: https://sso.ekin.com

前端頁面

基于vue-element-admin前端頁面默認(rèn)地址：http://localhost:9528
如果你用的是windows,可以更改hosts文件： 127.0.0.1 test.ekin.com，
這樣前端頁面地址是：http://test.ekin.com:9528

1. config.js文件

這個(gè)文件放于src/config/sysConfig.js,內(nèi)容很簡(jiǎn)單，是兩個(gè)地址：

'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://[后臺(tái)服務(wù)地址]/user/token?userCode=${user_id}`)
? ? //返回的結(jié)構(gòu)大概想這樣：
? ? // 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權(quán)限
? ? ? ? ? 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]: ''
? ? ? ? }
? ? ? },
? ? ? //這個(gè)是我們加的
? ? ? '/cas/serviceValidate': {
? ? ? ? target: "https://sso.ekin.com",
? ? ? ? changeOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? '/cas': ''
? ? ? ? }
? ? ? }
? ? },
? ? after: require('./mock/mock-server.js')
? },