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

首先我们回忆一下正常的登录流程:

登录页输入用户名密码

点击登录,后台返回token

将token进行缓存

请求接口将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()

}

})