两个系统之间如何实现单点登录:

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")
    }
})

       

Logo

前往低代码交流专区

更多推荐