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

目录

• 概要
• SSO
• 前端页面
• 1. config.js文件
• 2. SSO.js文件
• 3. 修改permission.js文件
• 4. 修改vue.config.js文件
• 5. 运行

概要

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

到此这篇关于Vue-Element-Admin前端接入SSO的方法步骤的文章就介绍到这了,更多相关Vue-Element-Admin接入SSO内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！