两个Vue管理系统之间实现单点登录(免密登录)

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

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

       

  • 4
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值