如果网络问题或服务端数据存在问题，这一步获取菜单失败，页面白屏，无任何提示信息 #497
Conversation
|
|
|
在 #487 已经做了相关预防措施，请勿多此一举 |
|
|
如果你不熟读代码就来贡献的话，所有不合理的pr将被关闭 |
|
那上面的情况造成的白屏怎么解决？在这里加 |
|
|
|
正常情况下获取用户信息那边出了问题的话会直接跳转到login页面，所以后面的流程就不会再运行了 |
|
再者Can't build routes事实上就是为了提示开发者，这边处理错误了，错误的原因大概率是数据格式不正确或其他，现实到了线上的话肯定要按照各自公司的产品需求去处理问题 |
获取用户信息正确的情况，不代表 |
|
生成环境不能展示白屏，什么都不提示的情况，很难排查错误，用户可不会F12去排错 |
|
生产环境，出现这种情况，要么是调试的时候没有调试全情况，要么就是接口炸了， |
|
接口都炸了 前端还能怎么样，顶多就是做个错误页面呗 |
|
后端动态菜单可能每个人的菜单都不一样，可能只有某个人的数据存在问题，才会出现这个问题，这个白屏时 |
|
|
|
都冷静点 都是为了让项目更好 观点不一致可以交流也需要交流 |
|
我有义务给你优化很完美吗？写个前端代码给你牛逼毁了
|
我有义务给你优化很完美吗？这句话送给你，专业的事，由专业的人做。 |
我有义务给你优化很完美吗? 写个前端代码给你牛通毁了 |
|
不知道还以为这项目是你个人开源的，你算个什么东西，别给项目抹黑了 |
|
一般会在request拦截器中统一处理服务端返回的错误，因此这里如果也做提示，则发生两次消息。如果其实有必要的话跳转到错误页会更好一点 |
当目前都没一个人能理解什么时候会白屏，就这水平有什么优越感？ |
同意你的看法，并且在代码中有预留该位置 |
|
是接口正常，接口数据存在问题的情况 |
|
按照你们理解，这里的 |
|
|
我知道了，你
我知道你不是个东西。你现实很自卑吧？ |
我是你爸，我能优越啥呢 |
|
@SpringHgui @rjl-cli 这个PR暂时按不接受处理 大家都冷静点 拜托 🙏 @SpringHgui 谢谢这个PR 如果有其他贡献交流另开一个PR |
原来是得狂犬病了 |
|
还不是你咬得，头像是你自拍吧 |
|
@SpringHgui 不好意思，这 @rjl-cli 是我家🐕，没拴好，没咬到你吧。 |
早打疫苗，对疯狗免疫 |
|
不管题主pr的质量怎么样. 组件还是应该有一个友好的异常处理, 如果接口炸了还有没有一种更友好的展示方式, 而不是白屏呢? |
在上述回答中，有提到关于request工具预留的错误处理占位，接口炸了这种情况我们并无法将所有人的情况囊括在内，比如有的人认为204无内容是报错，但有的人会认为204无内容是正常返回。模板为了兼顾通用性仅会预留出位置让用户自行修改 回到主题，避免白屏的情况是可以解决的直接跳转到 |
不是拦截器能拦截的，请看这里 #500 ，不是所有的问题都能开发阶段解决的，因为服务端数据是动态的，你没法保证每次返回的数据都是正确被解析和渲染菜单的，也就是说这里你不做处理，到了生产项目则就会发生白屏，问题存在就想办法解决，而不是想办法解决提出问题的人。 |
|
比如这种情况 #500 (comment) ，拦截器怎么拦截？讲了那么久还没整明白这bug什么情况发生？ |
SpringHgui
changed the title
|
腾讯的晋级项目你也敢用， 答辩一过管他洪水滔天。 看看那个wepy |
|
在 discussion 评论了一下，不过可能没啥人看，在这里也粘贴一下 （看了一眼项目的 releases 和 pull requests ，应该是个中文社区，如果不对请指出，谢谢） 既然这里是讨论区，还是发个评论支持楼主一下，应该也不算是灌水。 尽管楼主发的 PR 可能不那么完美，比如可能文本介绍的没那么详细（指的是 PR 正文中的“需求背景和解决方案”和“更新日志”部分）；也许可能 @timi137137 曾面对过或正在面对大量灌水、无意义的 issue 和 pull request ，因此耐心很有限。 但楼主这个 PR 可以一眼看出来是确实遇到了实际问题，进行了 debug 并找到了一种可行的解决方式，并付出一定的时间精力无偿来提 pull request，我认为至少是值得尊重和平等沟通的。
而从“多此一举”等其他言论中，让人感受到这个社区是极其不友好、不尊重开发者的。别人贡献付出的时间精力，在你的眼中只是“多此一举”。这不是一个社区该有的样子，这种行为会极大的损害楼主等其他开发者在你们社区甚至整个中文社区的热情和积极性。 哪怕这个 PR 不是你需要的，也请有一点礼貌和尊重，有一点包容。 |
这个不知道能不能活下来，wepy之前也参与贡献过，现在已经不维护了，可惜了~，已全部迁移到 |
不要因为一个人的态度问题, 质疑一群人的努力 |
|
本人以个人身份仅代表个人言论和行为，请勿牵扯至任何组织，公司，团队 @Senorsen 首先我很感谢你总结出来了整个问题所在并且公平的看待所有情况，对此我表示很感谢。 我相信许多人看完就会理解一些我的行为了，不过在此我强调一点。我，只是个免费为爱发电的贡献者，并非腾讯员工，我并不是你口中说的 在这里，我再一次对我用词不当过激行为向各位所有人道歉。但是，题主你应该清楚地理解上面说的一句话
后面你提出的问题 以下我会对你有疑惑的地方进行排错 // Token是否存在？如果不存在，跳转到登录页面强制登录
if (token) {
// 要前往的页面是登录页面？如果是，直接跳转到登录页面
if (to.path === '/login') {
next();
return;
}
// 错误预处理
try {
// 尝试获取用户信息
await userStore.getUserInfo();
} catch (error) {
// 如果获取用户信息失败，跳转到登录页面强制登录
MessagePlugin.error(error);
next({
path: '/login',
query: { redirect: encodeURIComponent(to.fullPath) },
});
NProgress.done();
}
// 如果获取用户信息成功，则认为用户已经登录，后端正常
const { asyncRoutes } = permissionStore;
// 如果没有动态路由，尝试获取动态路由
if (asyncRoutes && asyncRoutes.length === 0) {
// 获取动态路由表
const routeList = await permissionStore.buildAsyncRoutes();
// 遍历动态路由表，添加到路由器中
routeList.forEach((item: RouteRecordRaw) => {
// 此处不会出错，因为item强制规范为RouteRecordRaw类型，除非手动修改any
router.addRoute(item);
});async initRoutes() {
const accessedRouters = this.asyncRoutes;
// 在菜单展示全部路由
this.routers = [...homepageRouterList, ...accessedRouters, ...fixedRouterList];
// 在菜单只展示动态路由和首页
// this.routers = [...homepageRouterList, ...accessedRouters];
// 在菜单只展示动态路由
// this.routers = [...accessedRouters];
},
async buildAsyncRoutes() {
// 错误预处理
try {
// 发起菜单权限请求 获取菜单列表
const asyncRoutes: Array<RouteItem> = (await getMenuList()).list;
// 转换菜单列表为路由列表
this.asyncRoutes = transformObjectToRoute(asyncRoutes);
// 初始化路由
await this.initRoutes();
// 返回路由列表
return this.asyncRoutes;
} catch (error) {
// 如果在上面任何一步出现错误都将会在控制台打印错误信息
// 当出现该情况时，证明代码不应该放到生产环境中，因为该错误会导致路由无法正常加载
throw new Error("Can't build routes");
}
}, // 处理请求数据。如果数据不是预期格式，可直接抛出错误
transformRequestHook: (res, options) => {
const { isTransformResponse, isReturnNativeResponse } = options;
// 如果204无内容直接返回
const method = res.config.method?.toLowerCase();
if (res.status === 204 || method === 'put' || method === 'patch') {
return res;
}
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
if (isReturnNativeResponse) {
return res;
}
// 不进行任何处理，直接返回
// 用于页面代码可能需要直接获取code，data，message这些信息时开启
if (!isTransformResponse) {
return res.data;
}
// 错误的时候返回
const { data } = res;
if (!data) {
// router.push('/login'); 或者其他操作
throw new Error('请求接口错误');
}
// 这里 code为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
const { code } = data;
// 这里逻辑可以根据项目进行修改
const hasSuccess = data && code === 0;
if (hasSuccess) {
return data.data;
}
throw new Error(`请求接口错误, 错误码: ${code}`);
},在回答最后我再一次郑重地为自己过激的用词向各位道歉 |
🤔 这个 PR 的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
📝 更新日志
fix(组件名称): 处理问题或特性描述 ...
本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单