vue+element+admin,Vue-Element-Admin
本文主要介绍了vue-元素-管理前端接入单点登录(单点登录的缩写)的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录
概要单点登录(单点登录的缩写)前端页面1.配置文件文件2.SSO.js文件3.修改permission.js文件4.修改vue。配置。射流研究…文件5.运行
概要
相信很多像我一样初入门前端的时候，都是基于某个模板来学vue-元素-管理或者vue-元素-模板是一个很好的模板。而在后期，一般公司都会要求接入SSO，作者觉得这个太简单了，都是后台的工作，前端只需判断后台返回的代币或者其他信息就可以，所以在相关文档中也没有太多提及。相信仍有一部分人无从下手，所以在这里重新记录一下。
SSO
至于如果搭建SSO，这里不说，自行搜索。
我们用的单点登录(单点登录的缩写)是基于：Apereo中央认证服务5.3.9
假设搭建好的单点登录(单点登录的缩写)地址是：https://sso.ekin.com
前端页面
基于vue-元素-管理前端页面默认地址：http://本地主机：9528
如果你用的是windows，可以更改主机文件：127 .0 .0 .1 test.ekin.com
这样前端页面地址是：http://test.ekin.com:9528
1. config.js文件
这个文件放于src/config/sysConfig.js，内容很简单，是两个地址：
使用严格
var sysConfig={
//单点登录地址
https://号SSO。ekin。 com ，
//前端地址
sysDomain: http://测试。ekin。com:9528
}
module.exports=sysConfig
2. SSO.js文件
放于前端目录：src/utils/sso.js
从" x2js "导入x2js
从" axios "导入爱可信
const sys config=require( @/config/sys config )
导入{
getToken，
塞托肯
}来自@/utils/auth
导入商店自./商店
从导入路由器./路由器
const casServerUrl=系统配置。casServerUrl
const系统域=系统配置。sys域
const casLoginUrl=` $ { casServerUrl }/log in `中时
导出默认值{
enableCasAuth() {
const token=getToken()
if (token) {
返回
}
if (this.isCasCallback()) {
const ticket=this.getTicket()
this.getAuthInfo(ticket).然后(res={
调试器
if (res.success) {
const user_id=res。用户名。_ _文本
localStorage.setItem(name ，user_id)
this.login(用户标识)
}否则{
this.toAuth()
}
})
}否则{
this.toAuth()
}
},
toAuth() {
location.href=`${casLoginUrl}？service=$ { sysDomain } ` 1
},
指数(路径){
location.href=sysDomain /#/路径
},
getTicket() {
var reg=新RegExp((^)ticket=([^]*)($),一世’)
var r=窗口。位置。搜索。substr(1).匹配（注册)
if (r！=空)返回unescape(r[2])
返回空
},
getAuthInfo(票证){
返回axios。get(`/cas/service validate？service=$ { sysDomain } ticket=$ { ticket } `).然后(res={
调试器
const x2j=new x2js()
var info=x2j.xml2js(res.data)
如果(信息。服务响应。authenticationsuccess){
返回{
成功：真的，
用户名:信息。服务响应。认证成功。用户
}
}否则{
返回{
成功：假，
用户名":"
}
}
})
},
isCasCallback() {
const url=window.location.href
返回url.indexOf(sysDomain /？票=)!=-1
},
注销(){
位置。href=` $ { casServerUrl }/logout？service=$ { sysDomain } ` 1
},
getUserByUserId(user_id) {
return axios.post(`http://[后台服务地址]/用户/令牌？userCode=${user_id} `)
//返回的结构大概想这样：
//let data={
//代码：1,
//token: admin-token
//}
},
登录（用户标识){
this.getUserByUserId(用户标识)。然后（异步（响应)={
常量数据=response.data
if (data.code===1) {
塞托肯(数据。令牌)
var token=data.token
axios。默认值。标题。common[ token ]=getToken()
store.commit(用户/设置令牌，令牌)
//常量{
//角色
//}=等待存储。派遣(用户/getInfo )
//为了方便，直接给予管理权限
让roles=[ADMIN]
const访问路线=商店。分派(“许可/生成路线”，角色)
router.addRoutes(访问路由)
}否则{
router.push({
路径："/401"
})
}
})
}
}
3. 修改permission.js文件
引入sso.js
从" @/utils/sso "导入大约
更改路由器。每个之前
router.beforeEach(async (to，from，next)={
//开始进度条
NProgress.start()
//设置页面标题
文档。title=获取页面标题(to。meta。标题)
//确定用户是否已经登录
const hasToken=getToken()
如果(hasToken) {
//切为分配工作
}否则{
/*没有标记*/
if (whiteList.indexOf(to.path)！==-1) {
//在免费登录白名单中，直接去
下一个()
}否则{
//其他没有权限访问的页面被重定向到登录页面。
//next(`/login？redirect=${to.path} `)
//NProgress.done()
中科院。enablecasauth()；
next()；
n进展。done()；
}
}
})
4. 修改vue.config.js文件
devServer: {
港口：港口，
开：真的，
disableHostCheck: true，
覆盖：{
警告：错误，
错误：真
},
代理服务器：{
//更改xxx-api/login=模拟/登录
//细节：https://CLI . vue js . org/config/# devserver-proxy
【流程。环境。vue _ APP _ BASE _ API]:{
目标：` http://127.0.0.1:${port}/mock `，
更改来源：真的，
路径重写：{
[^进程。环境。vue _ app _ base _ API]:
}
},
//这个是我们加的
/cas/serviceValidate: {
目标：“https://sso.ekin.com”，
更改来源：真的，
路径重写：{
/cas :
}
}
},
之后：要求(。/mock/mock-server.js )
},
5. 运行
这时应该就可以请求http://test.ekin.com:9528，然后会跳转的单点登录(单点登录的缩写)登陆页面，输入你的域帐号就能正常加载出网站页面。
上面涉及到的两个接口，是需要后台提供的：
getUserByUserIdgetUserRoles但这两个不想麻烦合并成一个就可以了，或者直接模拟的数据返回就可以
到此这篇关于vue-元素-管理前端接入单点登录(单点登录的缩写)的方法步骤的文章就介绍到这了，更多相关vue-元素-管理接入单点登录(单点登录的缩写)内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。