原文链接：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()
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
当然如果不使用路由守卫,也可以通过跳转一个过渡页面或者在App.vue的生命周期中进行操作.个人还是建议,使用路由守卫.简洁方便管理