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

概要

相信很多像我一样初入门前端的时候，都是基于某个模板来学。 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数据返回就可以

来源：https://blog.csdn.net/kielin/article/details/107714953