Vue3——如何实现页面访问拦截

### 如何在 Vue3 和 Pinia 中实现针对指定页面的登录验证 #### 路由拦截与导航守卫 为了确保只有已登录用户可以访问特定页面，在 Vue Router 的 `router.beforeEach` 导航守卫中进行身份验证是一个常见的解决方案。通过检查本地存储中的令牌（Token），判断用户的登录状态并决定是否允许其进入目标页面。 以下是基于引用的内容[^3]以及标准实践的具体实现方法： ```javascript // router/index.ts 文件 import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/login', name: 'Login', component: () => import('@/views/LoginView.vue'), meta: { authRequired: false }, // 不需要认证 }, { path: '/dashboard', name: 'Dashboard', component: () => import('@/views/DashboardView.vue'), meta: { authRequired: true }, // 需要认证 }, ]; const router = createRouter({ history: createWebHistory(), routes, }); router.beforeEach((to, from, next) => { const token = localStorage.getItem('user-token'); // 获取 Token if (to.meta.authRequired && !token) { next({ name: 'Login' }); // 如果未登录则重定向至登录页 } else { next(); // 否则继续执行 } }); export default router; ``` 上述代码实现了路由级别的权限控制，其中利用了 `meta` 属性来标记哪些页面需要登录验证。 --- #### 使用 Pinia 存储和管理用户状态 Pinia 是 Vue3 推荐的状态管理库，用于集中管理和共享应用内的数据。可以通过创建一个专门的 Store 来保存当前用户的登录状态和其他相关信息。 以下是如何设置 Pinia Store 并将其集成到项目中的示例： ```typescript // stores/userStore.ts 文件 import { defineStore } from 'pinia'; import axios from 'axios'; // 假设使用 Axios 处理 API 请求 export const useUserStore = defineStore('user', { state: () => ({ isLoggedIn: !!localStorage.getItem('user-token'), // 初始状态取决于是否有 Token user: null, }), actions: { async login(credentials) { try { const response = await axios.post('/api/login', credentials); const token = response.data.token; localStorage.setItem('user-token', token); // 将 Token 存入 LocalStorage this.isLoggedIn = true; // 更新登录状态 this.user = response.data.user; // 设置用户信息 } catch (error) { console.error(error); } }, logout() { localStorage.removeItem('user-token'); this.isLoggedIn = false; this.user = null; }, }, }); ``` 在此基础上，可以在组件或其他地方调用该 Store 方法完成登录/登出操作，并同步更新全局状态。 --- #### 页面保护机制补充说明 除了基本的身份验证外，还可以进一步增强安全性措施，比如定期刷新 Token 或者检测 Token 是否过期等。这些功能通常依赖于后端接口的支持，前端仅负责发起请求并与服务端交互。 对于某些特殊场景下的需求——例如管理员专属区域或者不同角色对应的不同资源访问范围，则需扩展原有的逻辑结构，引入更复杂的权限判定算法或额外字段支持多级分类处理[^2]。 --- ### 总结 综上所述，借助 Vue Router 提供的强大工具集配合 Pinia 构建灵活高效的应用框架体系架构设计思路如下： 1. 定义好每条路径及其属性； 2. 编写通用型中间件函数拦截非法闯入行为； 3. 结合实际业务情况定制化开发满足个性化要求的功能模块。 以上便是关于如何在 Vue3 及 Pinia 下达成限定条件下才可浏览网页这一目的的技术解答[^1][^2]. ---