refactor(router): 将异步路由守卫改为Promise链式调用
避免使用async/await语法,改用Promise.then/catch处理异步逻辑 添加错误处理流程,在周期选择检查失败时继续正常路由流程
Showing
1 changed file
with
68 additions
and
39 deletions
| ... | @@ -79,7 +79,7 @@ const checkCycleSelection = async (to) => { | ... | @@ -79,7 +79,7 @@ const checkCycleSelection = async (to) => { |
| 79 | } | 79 | } |
| 80 | }; | 80 | }; |
| 81 | 81 | ||
| 82 | -router.beforeEach(async (to, from, next) => { | 82 | +router.beforeEach((to, from, next) => { |
| 83 | // 使用404为中转页面,避免动态路由没有渲染出来,控制台报警告问题 | 83 | // 使用404为中转页面,避免动态路由没有渲染出来,控制台报警告问题 |
| 84 | if (to.path == '/404' && to.redirectedFrom != undefined) { | 84 | if (to.path == '/404' && to.redirectedFrom != undefined) { |
| 85 | // 模拟异步操作 | 85 | // 模拟异步操作 |
| ... | @@ -93,47 +93,76 @@ router.beforeEach(async (to, from, next) => { | ... | @@ -93,47 +93,76 @@ router.beforeEach(async (to, from, next) => { |
| 93 | next({ ...to.redirectedFrom, replace: true }); | 93 | next({ ...to.redirectedFrom, replace: true }); |
| 94 | }, 1000); | 94 | }, 1000); |
| 95 | } else { | 95 | } else { |
| 96 | - // 检查是否需要周期选择 | 96 | + // 检查是否需要周期选择 - 使用Promise.then避免async/await |
| 97 | - const needsCycleSelection = await checkCycleSelection(to); | 97 | + checkCycleSelection(to).then(needsCycleSelection => { |
| 98 | - if (needsCycleSelection) { | 98 | + if (needsCycleSelection) { |
| 99 | - // 保存目标路由到sessionStorage | 99 | + // 保存目标路由到sessionStorage |
| 100 | - sessionStorage.setItem('cycle_target_route', JSON.stringify({ | 100 | + sessionStorage.setItem('cycle_target_route', JSON.stringify({ |
| 101 | - path: to.path, | 101 | + path: to.path, |
| 102 | - query: to.query, | 102 | + query: to.query, |
| 103 | - params: to.params | 103 | + params: to.params |
| 104 | - })); | 104 | + })); |
| 105 | - // 跳转到周期选择页面 | 105 | + // 跳转到周期选择页面 |
| 106 | - next({ | 106 | + next({ |
| 107 | - path: '/cycle-selection', | 107 | + path: '/cycle-selection', |
| 108 | - query: { code: to.query.code } | 108 | + query: { code: to.query.code } |
| 109 | - }); | 109 | + }); |
| 110 | - return; | 110 | + return; |
| 111 | - } | 111 | + } |
| 112 | - | 112 | + |
| 113 | - if (to.query.page_type === 'add' || to.query.page_type === undefined) { // 表单为新增状态, 检查是否有未完成的表单信息 | 113 | + // 继续原有的表单检查逻辑 |
| 114 | - const existingCookie = Cookies.get(to.query.code); | 114 | + if (to.query.page_type === 'add' || to.query.page_type === undefined) { // 表单为新增状态, 检查是否有未完成的表单信息 |
| 115 | - if (existingCookie && to.query.force_back !== '1') { | 115 | + const existingCookie = Cookies.get(to.query.code); |
| 116 | - // TAG: 只能在进入路由之前判断,不然很多组件数据不渲染 | 116 | + if (existingCookie && to.query.force_back !== '1') { |
| 117 | - showConfirmDialog({ | 117 | + // TAG: 只能在进入路由之前判断,不然很多组件数据不渲染 |
| 118 | - title: '温馨提示', | 118 | + showConfirmDialog({ |
| 119 | - message: '您还未完成的表单,是否继续?', | 119 | + title: '温馨提示', |
| 120 | - confirmButtonColor: styleColor.baseColor, | 120 | + message: '您还未完成的表单,是否继续?', |
| 121 | - cancelButtonText: '删除', | 121 | + confirmButtonColor: styleColor.baseColor, |
| 122 | - closeOnPopstate: false, | 122 | + cancelButtonText: '删除', |
| 123 | - }) | 123 | + closeOnPopstate: false, |
| 124 | - .then(() => { // 通过后把数据绑定上去 | 124 | + }) |
| 125 | - next(); | 125 | + .then(() => { // 通过后把数据绑定上去 |
| 126 | + next(); | ||
| 127 | + }) | ||
| 128 | + .catch(() => { // 删除cookie | ||
| 129 | + Cookies.remove(to.query.code); | ||
| 130 | + next(); | ||
| 131 | + }); | ||
| 132 | + } else { | ||
| 133 | + next(); | ||
| 134 | + } | ||
| 135 | + } else { | ||
| 136 | + next() | ||
| 137 | + } | ||
| 138 | + }).catch(error => { | ||
| 139 | + console.error('周期选择检查失败:', error); | ||
| 140 | + // 出错时继续正常流程 | ||
| 141 | + if (to.query.page_type === 'add' || to.query.page_type === undefined) { // 表单为新增状态, 检查是否有未完成的表单信息 | ||
| 142 | + const existingCookie = Cookies.get(to.query.code); | ||
| 143 | + if (existingCookie && to.query.force_back !== '1') { | ||
| 144 | + // TAG: 只能在进入路由之前判断,不然很多组件数据不渲染 | ||
| 145 | + showConfirmDialog({ | ||
| 146 | + title: '温馨提示', | ||
| 147 | + message: '您还未完成的表单,是否继续?', | ||
| 148 | + confirmButtonColor: styleColor.baseColor, | ||
| 149 | + cancelButtonText: '删除', | ||
| 150 | + closeOnPopstate: false, | ||
| 126 | }) | 151 | }) |
| 127 | - .catch(() => { // 删除cookie | 152 | + .then(() => { // 通过后把数据绑定上去 |
| 128 | - Cookies.remove(to.query.code); | 153 | + next(); |
| 129 | - next(); | 154 | + }) |
| 130 | - }); | 155 | + .catch(() => { // 删除cookie |
| 156 | + Cookies.remove(to.query.code); | ||
| 157 | + next(); | ||
| 158 | + }); | ||
| 159 | + } else { | ||
| 160 | + next(); | ||
| 161 | + } | ||
| 131 | } else { | 162 | } else { |
| 132 | - next(); | 163 | + next() |
| 133 | } | 164 | } |
| 134 | - } else { | 165 | + }); |
| 135 | - next() | ||
| 136 | - } | ||
| 137 | } | 166 | } |
| 138 | }) | 167 | }) |
| 139 | 168 | ... | ... |
-
Please register or login to post a comment