nuxt3项目跳转路由前中断接口
时间: 2025-05-20 12:39:44 浏览: 18
### 实现 Nuxt 3 中的路由守卫以中断路由跳转
在 Nuxt 3 中,通过使用路由中间件可以实现在路由跳转前后执行特定逻辑的功能。为了实现路由跳转前中断并处理接口请求,在 `middleware` 文件夹内创建相应的 JavaScript 或 TypeScript 文件来定义中间件函数。
#### 创建自定义中间件
```javascript
// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
// 执行异步操作,比如发起 API 请求
const response = await $fetch('/api/checkAuth')
if (!response.isAuthenticated) {
// 如果认证失败,则重定向到登录页或其他指定位置
return navigateTo('/login')
}
})
```
此代码片段展示了如何利用 `$fetch` 方法发送 HTTP 请求,并依据返回的结果决定是否继续导航至目标路径[^2]。
对于更复杂的场景,可能还需要考虑加载状态管理以及错误处理机制:
- 使用组合式 API (`setup`) 来引入必要的工具函数;
- 添加 try-catch 结构捕获潜在异常;
- 显示提示信息给用户知道当前处于等待响应的状态;
下面是一个改进版本的例子:
```typescript
import { useLoadingStore } from '~/stores/loading'
// middleware/complex-auth.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
const loadingStore = useLoadingStore()
try {
loadingStore.start() // 开始显示加载动画
let result;
try {
result = await $fetch('/api/checkAuth');
} catch(error){
console.error('Failed to fetch auth status:', error);
throw new Error('Authentication check failed.');
}
if(!result?.isAuthenticated){
return abortNavigation(); // 阻止此次导航行为
}
} finally {
loadingStore.finish(); // 不管成功与否都结束加载动画
}
});
```
上述代码不仅实现了基本的身份验证检查功能,还加入了全局加载指示器的支持,提高了用户体验的质量。
阅读全文
相关推荐






