Vue 项目刷新页面 #/ 之后的地址丢失怎么办？

Question

如题：
刷新页面之后有概率 #/ 之后的地址消失，
1.token 保活没问题，token 过期的提示都在
2.和缓存无关，clear site data 之后刷新页面，提示 无token
3.没有除外 JS 代码的重定向，debugger 开了也没用
4.概率性出现，无痕浏览器里面也不影响
5.和单个电脑无关，多台电脑都能复现

复现条件：
1.单个账号登录 1H+ 无操作，可以提升触发 BUG 的概率

Answer 1

按照问题描述中的 2, 5 两条，基本上可以判断是你的业务代码出现了问题。
但是没有办法看到具体的项目代码，所以只能建议从一下两个位置着手：

1. 检查路由守卫
2. 检查权限判断相关的业务代码

虽然HTTP服务也有可能，但是我认为大概率不会是这个。

---

按照补充的复现条件，建议是完成登录之后，在 DevTools 中修改 storage 中的 token，看看是否稳定复现。

至于测试环境没问题，正式环境有问题，可能是由于token过期时间设置的原因。

Answer 2

刷新浏览器会跟服务器交互，后端如果重定向了，应该有能力吃掉hash吧，这个我没验证。

chrome勾上preserve log，然后在windows添加一个hashchange事件，刷新触发bug，看能不能捕捉到，如果能捕捉到，说明hash是前端修改的。

只要确定了是前端修改的，那应该好找，全局搜一下修改url的api，进去加个alert，定位源头。

window.addEventListener('hashchange', (e) => {
  console.log('The hash has changed!');
});

Answer 3

从浏览器的角度来说，刷新应该不影响 hash（#/）。

所以大概率还是你的代码包含了自动跳转的功能，并且在一段时间后有大概率会触发。

可以考虑的方案：

1. 只做一个简单的 html，验证你的浏览器刷新会不会影响 hash
2. 我猜应该没影响。接下来可以用全局路由守卫找到更新的原因。
3. 然后解决这个问题