TOC
先来阐述一下我的登录逻辑
- 进入组件 A 请求接口 api 请求会被拦截器拦截 检查该接口是否需要登录
- 如果用户未登录 跳转到 login 组件
xx.com/#/login?cb=当前的地址 - login 组件将会保存进来的 cb 地址（放到 Localstorge 中）然后跳转到登录地址 让用户授权登录
- 登录完成后后端帮我重定向到一个登录成功地址
xx.com/#/loginSuccess进入登录成功组件 - 保存后端放在 query 里的 uuid，随后从 localstorge 拿到之前的地址 设置 location.href 来还原地址
- 理论上会回到之前发起登录的组件 然后重进生命周期
但是死妈的微信就是把页面 A 给我缓存了 操你妈的 这个页面的任何生命周期都无法触发 根本不会触发重建路由重新匹配 就算你在地址后面加一个随机数都没用
解决办法
在组件 A 的生命周期内注册一个回调函数，放到全局作用域内,把任何登录成功情况下你想要调用的方法放在回调里
mounted() {
this.init()
// HACK
if (!window.loginCbs) {
window.loginCbs = []
}
window.loginCbs.push(() => {
this.init()
})
}
接下来就是在登录成功组件中，运行这个回调函数
mounted() {
// 获取token成功 回到首页
if (this.$route.query.token) {
SaveLocalStorage('uuid', this.$route.query.token)
}
let loginURL = localStorage.getItem('logincb')
if (loginURL) {
localStorage.removeItem('logincb')
window.location.href = loginURL
// 进不了生命周期我就手动搞
if (window.loginCbs) {
window.loginCbs.forEach(v => v())
}
} else {
this.$router.push('/')
}
}