两个系统之间跳转免密登录

在处理业务场景时需要跳转不同系统软件,在每次跳转都需要重新登录系统,那么这种繁琐的登录流程会让人心态爆炸,能不能在只登陆一个系统的情况下就可以免登录跳转其他系统呢?当然是可以的.
首先我们回忆一下正常的登录流程:

1. 登录页输入用户名密码
2. 点击登录,后台返回token
3. 将token进行缓存
4. 请求接口将token代入

如果实现免密登录,则不需要输入用户名密码这一流程,现在我们只需要传递一个参数给后台,让后台通过传递的参数解析后返回我们一个token,再利用这个新的token进行登录
思路有了,接下来就是撸代码的过程.
在A系统只需要添加window.open('https://xxx.html?token=xxxx', '_blank')打开B系统页面,
因为项目中使用的是vue,刚好可以使用vue的全局路由守卫router.beforeEach((to,from,next)=>{}) 我们在B系统 添加路由守卫

router.beforeEach((to, from, next) => {
    let hrefIdx = window.location.href.indexOf('token='); // url中是否携带token
    let userInfo = localStorage.getItem('userInfo') // 本地缓存中是否有用户信息(系统本身有可能已经登录)
    if (hrefIdx > -1 && (userInfo === '' || userInfo === undefined || userInfo === null)) { // 如果url携带token,并且没有登录后的用户信息
        let token = window.location.href.slice(hrefIdx + 6); // 截取token
        axios.post(`后台接口`, token).then(res => {
            // store.commit("USER_INFO") // 可能需要将用户信息存入store中, 视情况而定
            // localStorage.setItem('menu', JSON.stringify(res.data.menuList)) // 可能需要缓存菜单列表, 视情况而定
            ...
            // 这里省略的部分几乎和登录操作相同
            let defaultUrl = "/home";
            next(defaultUrl);
        })
    } else {
        next()
    }
})

当然如果不使用路由守卫,也可以通过跳转一个过渡页面或者在App.vue的生命周期中进行操作.个人还是建议,使用路由守卫.简洁方便管理