javascript - Uncaught (in promise) undefined - Vue-router
问题描述
我面临一个非常奇怪的问题,如果具有受限权限的用户尝试登录我的网络应用程序,他们会看到以下错误:
Uncaught (in promise) undefined
但这不会发生在拥有最大权限的用户身上。
我认为这个问题是由重新路由引起的。如果用户没有 page_access 1,它会路由到 /holidays。另一个奇怪的是,这个错误只出现一次,那是用户第一次登录的时候。如果页面被刷新或者用户导航到其他页面,它就不会出现。
路由器.js
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard,
beforeEnter(to, from, next) {
if(localStorage.token) {
if(localStorage.page_access.indexOf('1') != -1 && localStorage.page_access != null) {
next('/holidays');
}
else {
next();
}
} else {
next('/login');
}
}
},
{
path: '/holidays',
name: 'holidays',
component: Holidays,
beforeEnter(to, from, next) {
if(localStorage.token) {
next();
} else {
next('/login');
}
}
},
],
mode: 'history'
})
router.beforeResolve((to, from, next) => {
if(localStorage.token && from.name != 'login' && to.name != 'login') {
store.dispatch('autoLogin')
.then(response => {
store.dispatch('getNavigation');
next();
})
.catch(err => {
console.log(err);
});
}
else if(from.name && !localStorage.token) {
router.go('/login');
}
else {
next();
}
});
export default router;
store.js
async autoLogin({commit}) {
const token = localStorage.getItem('token');
const remember_token = localStorage.getItem('remember_token');
if(!token) {
return;
}
try {
const res = await axios({
method: 'post',
data: { userId: localStorage.user_id, token: localStorage.remember_token },
url: 'https://controlapi.totalprocessing.com/api/get-user',
config: { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
})
.then(response => {
if(response.data.remember_token == remember_token) {
commit('authUser', { token: token });
return response;
}
else {
localStorage.clear();
return null;
}
})
.catch(e => {
this.errors.push(e);
return e;
})
return res;
}
catch(e) {
console.log(e);
return e;
}
}
getNavigation({commit}) {
let pageAccess = localStorage.page_access == 'null' ? null : localStorage.page_access;
let subPageAccess = localStorage.sub_page_access == 'null' ? null : localStorage.sub_page_access;
axios({
method: 'post',
data: { pageAccess: pageAccess, subPageAccess: subPageAccess },
url: 'https://controlapi.totalprocessing.com/api/client-get-navigation',
config: { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
})
.then(response => {
console.log(response.data);
const data = response.data;
const tree = [];
data.reduce(function(a, b, i, r) {
// Add the parent nodes
if(a.page_id != b.page_id){
tree.push({ page_id: a.page_id,
page_name: a.page_name,
page_path: a.path,
page_icon: a.page_icon
});
}
// Add the last parent node
if(i+1 == data.length) {
tree.push({ page_id: b.page_id,
page_name: b.page_name,
page_path: b.path,
page_icon: b.page_icon
});
// Add the child nodes to the parent nodes
data.reduce(function(a, b) {
if(a.sub_page_id) {
const find = tree.findIndex(f => f.page_id == a.parent_id);
// Add the first child node to parent
if(!("children" in tree[find])) {
tree[find].children = [];
tree[find].children.push({ page_id: a.sub_page_id,
page_name: a.sub_page_name,
page_path: a.sub_page_path,
page_icon: a.sub_page_icon
});
}
// Add the remaining child nodes to parent nodes
else {
tree[find].children.push({ page_id: a.sub_page_id,
page_name: a.sub_page_name,
page_path: a.sub_page_path,
page_icon: a.sub_page_icon
});
}
}
return b;
});
}
return b;
});
commit('authNav', {
navigation: tree
});
})
.catch(e => {
this.errors.push(e)
})
}
解决方案
根据我过去几天的经验,在调用this.$router.push()
.
我发现有两种方法是非常可行的:
handleSomething() {
this.$router.push({}).catch((err) => {
throw new Error(`Problem handling something: ${err}.`);
});
},
和
async handleSomething() {
try {
await this.$router.push({});
} catch (err) {
throw new Error(`Problem handling something: ${err}.`);
}
},
目前,我更喜欢这里的 async/await 技术,因为它的执行阻塞性质,但你应该注意的关键是“未捕获的 promise”错误本身是 JavaScript 中的一个已知问题,通常称为“a承诺被吞下”,这是由于 Promise 被拒绝但该“错误”被吞下,因为它没有被正确捕获。也就是说,没有捕获错误的代码块,因此您的应用程序无法对错误执行任何操作。
这意味着最重要的是不要吞下错误,这意味着您需要在某个地方捕获它。在我的两个示例中,您可以看到错误将通过 catch 块传递。
错误吞咽的次要因素是错误甚至一开始就被抛出。在我看到这一点的应用程序中,很难调试,但我可以看到错误的性质与 Vue 组件在路由更改时卸载和加载有关。例如,如果您调用this.$router.push()
一个组件,然后该组件在路由更改正在进行时被销毁,那么您可能会看到这样的错误是合理的。
作为此问题的扩展,如果发生路由更改并且结果组件尝试.push()
在 Promise 解决之前从事件中读取数据,它也可能抛出此错误。await
应该通过指示您的应用程序在读取之前等待来停止这样的错误。
所以简而言之,调查这两件事:
- 您是否在执行时以某种方式破坏/创建组件
this.$router.push()
? - 下一个组件是否可能在路由更改完成之前读取有关路由参数的数据?
如果您发现其中一些可能正在发生,请考虑您的数据流并确保通过驯服异步行为来解决它,而不仅仅是通过抑制错误。在我看来,错误是更大问题的征兆。
在调试期间,将console.log()
s 添加到所有组件created/mounted
和destroyed
生命周期方法中,以及与路由更改相关的函数中。您应该能够掌握数据流动的方式。
我怀疑这个问题的性质源于this.$route.params
飞行中路线更改期间的下游使用。添加大量的 console.logs 和/或单步调试器。
推荐阅读
- c++-cli - 在 C++ Windows 窗体应用程序中使用“查询用户/服务器:XXX”命令
- scorm - 如何参考其他 LMS 的培训课程?
- python - 有没有办法在 Odoo 的 PostgreSQL 数据库表中创建包含相同字段的运行时“python 类”(模型)?
- node.js - 如何使用nodejs中的ws npm模块从客户端向WebSocket服务器发送“升级”握手?
- python - 为什么我在尝试创建数据框时会收到 TypeError?
- google-cloud-dataflow - Google Cloud Dataflow UDF 添加数字架构
- python - 使用 Python 和 Pandas 的最佳实践多地址查找 Google API
- database - 在sqlite中,当我们有多层内部表b树页面时,表B树内部单元格的值是什么意思?
- oauth - 通过 Google API 获取 IP 地址的用户信息
- linux - Jenkins -Selenium Webdriver-Java:错误:DevToolsActive 端口不退出