热点聚焦：两个系统之间跳转免密登录

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

热点聚焦：两个系统之间跳转免密登录

2023-05-06 13:09:56 来源：博客园

(资料图片)

原文链接：https://blog.csdn.net/CODING_1/article/details/125373831

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

登录页输入用户名密码点击登录,后台返回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() }})1234567891011121314151617当然如果不使用路由守卫,也可以通过跳转一个过渡页面或者在App.vue的生命周期中进行操作.个人还是建议,使用路由守卫.简洁方便管理

关键词：