两个系统之间如何实现单点登录:
A系统正常登录:
1、 携带账号密码验证码
2、调用登录接口返回token和信息
3、登录成功跳转首页
B系统免密登录:
1、A系统单点按钮跳转B系统(地址栏拼接token信息,最好加密处理)页面
window.open('https://xxx.html?access_token=123456', '_blank')
2、B系统可以在全局路由守卫或者页面生命周期中实现验证token信息成功跳转页面
router.beforeEach((to,from,next)=>{})
代码实现:
router.beforeEach((to, from, next) => {
let hrefIdx = window.location.href.indexOf('access_token='); // url中是否携带token
let userInfo = localStorage.getItem('userInfo') // 本地缓存中是否有用户信息(系统本身有可能已经登录)
if (hrefIdx > -1 && (userInfo === '' || userInfo === undefined || userInfo === null)) { // 如果url携带token,并且没有登录后的用户信息
// 截取token
let arr = window.location.href.split('&') //避免有多个传参
let tokenArr = arr.filter(_=>_.includes('access_token=')) //筛选出含有token的数组
let access_token = tokenArr[0].split('access_token=')[1] //拿到token
localStorage.setItem('ACCESS_TOKEN',access_token); // 缓存token
axios.post(`后台验证token接口`, access_token).then(res => {
//返回的信息与正常登录逻辑一致即可
// localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo)) // 将用户信息保存本地
next("/home");
})
} else {
next("/login")
}
})