Vite + Vue3 + TS项目配置前置路由守卫

在使用 Vite 和 Vue 3 搭建 TypeScript 项目时，配置前置路由守卫是一个常见的需求。前置路由守卫可以帮助我们在路由跳转前进行权限校验、数据加载等操作，从而确保用户能够顺利访问指定页面。下面，我们将详细讲解如何在 Vite 和 Vue 3 项目中配置前置路由守卫，并给出具体代码示例。

一、项目配置

首先，确保已经安装并创建了一个基础的 Vite + Vue 3 + TypeScript 项目。如果还没有创建项目，可以通过以下命令进行创建：

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install

二、安装 Vue Router

接下来，我们需要安装 Vue Router 以便实现路由功能。可以通过如下命令进行安装：

npm install vue-router

三、配置路由

在 src 目录下创建一个新的 router 文件夹，里面新建 index.ts 文件，用于配置路由。

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

// 引入组件
import Home from '../views/Home.vue';
import About from '../views/About.vue';

// 定义路由
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

// 导出路由实例
export default router;

四、配置前置路由守卫

现在我们可以在 src/router/index.ts 中添加前置路由守卫了。在路由实例上使用 beforeEach 方法，来设置全局的路由守卫。

// src/router/index.ts

// ... 其他代码不变

// 前置路由守卫
router.beforeEach((to, from, next) => {
  // 假设我们通过某种方法获取用户的登录状态
  const isAuthenticated = false; // 替换为真实的认证逻辑

  if (to.name !== 'Home' && !isAuthenticated) {
    // 如果用户未登录，重定向到 Home 页面
    next({ name: 'Home' });
  } else {
    // 允许访问目标路由
    next();
  }
});

// 导出路由实例
export default router;

在上面的代码中，我们定义了一个 isAuthenticated 变量来模拟用户的登录状态。当用户尝试访问除了 Home 以外的页面时，如果用户未登录，就将其重定向到 Home 页面。

五、在 App 组件中使用路由

接下来，我们需要在 src/main.ts 中将路由添加到应用程序中，以确保路由能够工作。

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

六、创建页面组件

我们可以简单创建一下 Home 和 About 页面以进行测试：

<!-- src/views/Home.vue -->
<template>
  <h1>欢迎来到首页</h1>
  <router-link to="/about">去 About 页面</router-link>
</template>

<script setup lang="ts">
// Nothing here for now
</script>

<!-- src/views/About.vue -->
<template>
  <h1>关于页面</h1>
  <router-link to="/">去首页</router-link>
</template>

<script setup lang="ts">
// Nothing here for now
</script>

七、总结

至此，我们成功地在 Vite + Vue 3 + TypeScript 项目中配置了前置路由守卫。可以根据业务需求，进一步扩展守卫逻辑，比如加入权限管理、请求数据等。通过使用路由守卫，可以很方便地管理用户的访问权限，使得应用更加安全和可靠。希望以上的分享对你的项目开发有所帮助！