vue项目单点登录的实现

1.需求:既要实现单点登录又要实现在未成功单点登录时跳转到正常的登录页.
2.实现方法,router文件夹下:

export const constantRoutes[{
//此处为了让项目一开始就跳到sso页面所以把原项目首次出现的登录地址改成指向sso页面.
path: '/login',
component: () = > import('@/views/sso/index'),
hidden: true,
meta:{
title: 'login'
}
},{
//正常登录的页面
path: '/jump',
component: () = > import('@/views/login/index'),
hidden: true,
meta:{
title: 'login'
}]

3.在前端项目的白名单中加入SSO地址,在permission.js文件中

const whiteList = ['/login','/sso','/jump']

4.在sso页面

<template>
<div/>
<template>
<script>
import {globals, srvice as request} from '@/utils/requst'
export default {
components: {},
data() {
return {
code: ''
}
},
created(){
this.code = this.getQueryVariable('code')
if(this.code){
this.sso()
}else{
this.$router.push({path: 'jump'})
}
},
methods: {
sso() {
request({
url: globals.sso + 'auth?code = ' + this.code,
method: 'get'
}).then((data)=>{
if(data.success){
this.$router.push({path: '/dashboard'})
}else{
this.$message.error(data.msg)
if(data.code == 500 || data.code == 201){
window.open(globals.sso_uri,"parent")
}else{
window.open(globals.register,"parent")
}
this.$router.push({path: '/login'})
}
}).catch((e)=>{
this.$message.error(e.message)
})
},
getQueryVariable(variable){
window.location.search.substring(1)
const vars = query.split('&')
for (let i=0; i<vars.length; i++){
const pair = vars[i].split('=')
if(pair[0] ===variable){
return pair[1]
}
}
if(vars.length ===1&&var[0] === ' '){
return ''
}
return vars
}
}
}
</script>