nuxt3 中 路由守卫
时间: 2025-05-28 19:47:53 浏览: 17
### Nuxt3 路由守卫的使用指南
Nuxt 3 提供了一种简单而强大的机制来管理路由导航行为,称为 **路由守卫**。通过这些守卫,开发者可以在用户访问特定页面之前或之后执行逻辑操作,比如权限验证、数据预取等。
#### 定义全局路由守卫
在 Nuxt 3 中,可以通过 `defineNuxtRouteMiddleware` 创建一个中间件并将其注册为全局路由守卫[^5]。下面是一个简单的例子:
```javascript
// 文件路径: middleware/authenticated.js
export default defineNuxtRouteMiddleware((to, from) => {
if (!userIsLoggedIn()) { // 假设 userIsLoggedIn 是一个检查登录状态的函数
return navigateTo('/login'); // 如果未登录,则重定向到登录页
}
});
```
此代码片段展示了一个典型的场景——当用户尝试进入受保护的页面时,如果没有登录会自动被引导至 `/login` 页面。
#### 注册局部路由守卫
除了作为全局中间件外,还可以针对单个页面设置专属的路由守卫。只需要在同一目录下的 `.vue` 文件同级位置创建名为 `[name].middleware.[js|ts]` 的文件即可生效[^5]。例如:
```javascript
// pages/dashboard.middleware.ts
import { useAuthStore } from '~/stores/auth';
export default defineNuxtRouteMiddleware(async (to, from) => {
const authStore = useAuthStore();
if (!(await authStore.isAuthenticated())) {
return abortNavigation(new Error('Unauthorized')); // 终止导航并抛出异常
}
});
```
这里展示了如何利用 Pinia store 来存储用户的认证信息,并基于它决定是否允许继续浏览目标资源。
#### 处理异步任务与错误捕捉
有时我们需要等待某些异步过程完成后才能做出进一步决策;这时可以借助 JavaScript Promises 实现延迟响应效果。另外还需要注意的是,在任何情况下都应妥善处理可能出现的各种意外状况以免影响用户体验质量:
```typescript
const ready = await useRouter().isReady(); // 确保路由器已经准备好再做下一步动作
try {
const result = await someAsyncOperation();
} catch(err){
console.error(`An error occurred during navigation:${err.message}`);
}
onError((error)=>{
alert(error?.message || 'Something went wrong!');
})
```
以上代码说明了怎样同步确认 Router 初始化完毕以及应对潜在的风险措施。
---
### 总结
综上所述,Nuxt3 支持灵活运用多种类型的路由守卫满足实际需求中的复杂控制流设计要求。无论是整体性的还是细粒度级别的拦截策略都能轻松达成预期目的。
阅读全文
相关推荐
















