基于Vue-Element-Admin前端接入SSO

最新推荐文章于 2024-07-20 12:11:41 发布

kielin

最新推荐文章于 2024-07-20 12:11:41 发布

阅读量3.9k

点赞数 7

分类专栏： VUE 文章标签： element-admin SSO

本文链接：https://blog.csdn.net/kielin/article/details/107714953

版权

本文档详细记录了如何在基于Vue-Element-Admin的前端项目中接入SSO。首先介绍了SSO的基本概念，然后逐步讲解了前端配置的步骤，包括修改config.js、创建SSO.js文件、更新permission.js以及调整vue.config.js。通过这些操作，前端能够正确处理SSO的登录流程，并与后台接口进行交互。最后，提到了需要后台提供的两个关键接口：getUserByUserId和getUserRoles。

摘要由CSDN通过智能技术生成

基于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.