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

'use strict'
var sysConfig = {
    //sso address
  casServerUrl: "https://sso.ekin.com",
  //frontend address
  sysDomain: "http://test.ekin.com:9528"
}
module.exports = sysConfig

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'
          })
        }
      })
  }
}

import cas from '@/utils/sso'

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();
    }
  }
})

 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')
  },