不同项目如何写路由守卫

我代码真的菜
141 阅读10分钟

前言

前端项目的路由守卫是用来控制用户在应用程序中导航时执行的操作的一种技术。它们通常用于执行权限验证、重定向或其他全局操作，以确保用户在访问特定页面或路由时符合预期的条件。不同的前端框架和库有不同的方式来实现路由守卫，下面我将介绍一些常见的前端框架的路由守卫的实现方法。

Vue2

在Vue.js中，你可以使用路由守卫来控制导航。Vue Router提供了三种不同的路由守卫：

  • beforeEach: 在路由跳转之前执行，可以用于全局导航守卫，例如权限验证。
  • beforeResolve: 在导航被确认之前，也就是在所有异步路由钩子被解析之后执行。
  • afterEach: 在导航完成之后执行，可以用于日志记录或分析。 在Vue.js 2.x 项目中编写一个路由守卫，你可以使用 Vue Router 2.x 来实现。下面是一个基本的示例，演示如何创建一个全局前置路由守卫来验证用户是否已登录：

首先，确保你已经安装了 Vue.js 和 Vue Router，如果没有，可以使用以下命令安装它们：

npm install vue
npm install vue-router

接下来，在你的 Vue.js 2.x 项目中创建一个路由配置文件，通常命名为 router.js 或类似的名字。然后，编写一个全局前置路由守卫：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 创建一个路由实例
const router = new VueRouter({
  routes: [
    // 在这里定义你的路由
  ]
})

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
  // 在路由跳转前执行逻辑

  // 检查用户是否已登录，这是一个示例函数，你需要根据实际情况来实现
  const isAuthenticated = checkIfUserIsAuthenticated()

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 如果需要登录而用户未登录，可以重定向到登录页面
    next('/login')
  } else {
    // 如果用户已登录或不需要登录验证，继续导航
    next()
  }
})

export default router

在上面的代码中，我们首先导入 Vue、VueRouter，并创建了一个路由实例。然后，我们定义了一个全局前置路由守卫 beforeEach，它会在每次路由跳转前执行。在守卫中，我们检查用户是否已登录（你需要实现 checkIfUserIsAuthenticated 函数来进行实际的验证）。如果用户需要登录但未登录，我们使用 next('/login') 重定向到登录页面；否则，我们调用 next() 来继续导航。

最后，确保在主 Vue 实例中使用这个路由配置文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由配置文件

new Vue({
  render: h => h(App),
  router, // 注入路由配置
}).$mount('#app')

这样，你就创建了一个基本的全局前置路由守卫，用于在用户访问特定路由时验证用户身份。在实际项目中，你需要根据需求进一步扩展和优化路由守卫的逻辑。

Vue3

首先，确保你已经安装了 Vue 3 和 Vue Router 4，如果没有，可以使用以下命令安装它们：

npm install vue@next
npm install vue-router@4

接下来，在你的 Vue 3 项目中创建一个路由配置文件，通常命名为 router.js 或类似的名字。然后，编写一个全局前置路由守卫：

import { createRouter, createWebHistory } from 'vue-router'

// 创建一个路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 在这里定义你的路由
  ]
})

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
  // 在路由跳转前执行逻辑

  // 检查用户是否已登录，这是一个示例函数，你需要根据实际情况来实现
  const isAuthenticated = checkIfUserIsAuthenticated()

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 如果需要登录而用户未登录，可以重定向到登录页面
    next('/login')
  } else {
    // 如果用户已登录或不需要登录验证，继续导航
    next()
  }
})

export default router

在上面的代码中，我们首先导入 createRouter 和 createWebHistory 函数，然后创建了一个路由实例。接下来，我们定义了一个全局前置路由守卫 beforeEach，它会在每次路由跳转前执行。在守卫中，我们检查用户是否已登录（你需要实现 checkIfUserIsAuthenticated 函数来进行实际的验证）。如果用户需要登录但未登录，我们使用 next('/login') 重定向到登录页面；否则，我们调用 next() 来继续导航。

最后，确保在主 Vue 实例中使用这个路由配置文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入路由配置文件

const app = createApp(App)
app.use(router) // 注入路由配置
app.mount('#app')

这样，你就创建了一个基本的全局前置路由守卫，用于在用户访问特定路由时验证用户身份。在实际项目中，你需要根据需求进一步扩展和优化路由守卫的逻辑。

vue3+typescript

在 Vue 3 项目中使用 TypeScript（ts）编写路由守卫时，你可以遵循以下步骤：

  1. 创建路由配置：

    在你的项目中创建一个路由配置文件，通常命名为 router.ts 或类似的名字。在这个文件中，你需要导入相关的 Vue Router 类型和创建一个路由实例。

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

const routes: RouteRecordRaw[] = [
  // 在这里定义你的路由
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

  2. 编写路由守卫：

    创建一个全局前置路由守卫来验证用户是否已登录。你可以在路由配置文件中编写它，或者在单独的文件中定义。

    // router.ts
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';

// 全局前置路由守卫
router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  // 在路由跳转前执行逻辑

  // 检查用户是否已登录，这是一个示例函数，你需要根据实际情况来实现
  const isAuthenticated = checkIfUserIsAuthenticated();

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 如果需要登录而用户未登录，可以重定向到登录页面
    next('/login');
  } else {
    // 如果用户已登录或不需要登录验证，继续导航
    next();
  }
});

    注意，上述代码中的 to.meta.requiresAuth 假定你在路由配置中使用了路由元信息来标记需要验证的路由。你可以根据实际需求进行修改。

  3. 注入路由配置：

    在你的主 Vue 实例中注入路由配置。

    // main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由配置文件

const app = createApp(App);
app.use(router); // 注入路由配置
app.mount('#app');

这样，你就完成了在 Vue 3 + TypeScript 项目中编写路由守卫的基本步骤。根据你的项目需求，你可以进一步扩展和优化路由守卫的逻辑。请确保根据实际情况实现 checkIfUserIsAuthenticated 函数，以进行用户身份验证。

React

在 React 应用中实现路由守卫需要使用 React Router，下面是一个示例，演示如何创建一个路由守卫来验证用户是否已登录：

首先，确保你已经安装了 React 和 React Router，如果没有，请使用以下命令安装它们：

npm install react
npm install react-router-dom

接下来，你可以按照以下步骤来创建路由守卫：

  1. 创建路由配置：

    在你的项目中创建一个路由配置文件，通常命名为 router.js 或类似的名字。在这个文件中，你需要定义你的路由以及路由守卫。

    // router.js
import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

// 在这里定义你的路由
const AppRouter = () => (
  <Router>
    <Route path="/public" component={PublicPage} />
    <PrivateRoute path="/private" component={PrivatePage} />
  </Router>
);

export default AppRouter;

    在上面的代码中，我们定义了一个 PrivateRoute 组件，它用于验证用户是否已登录，如果未登录，则重定向到登录页面。

  2. 实现路由守卫逻辑：

    在 PrivateRoute 组件中，我们调用了 isAuthenticated() 函数来验证用户是否已登录。你需要实现这个函数以根据你的应用逻辑进行身份验证。

  3. 在主组件中使用路由配置：

    最后，在你的主组件中使用路由配置。

    import React from 'react';
import AppRouter from './router'; // 导入路由配置文件

const App = () => {
  return (
    <div>
      {/* 其他应用程序内容 */}
      <AppRouter />
    </div>
  );
};

export default App;

    确保在你的主组件中嵌套 AppRouter，这样你的应用程序就可以使用定义的路由守卫了。

这样，你就创建了一个基本的路由守卫，用于在用户访问特定路由时验证用户身份。在实际项目中，你需要根据需求进一步扩展和优化路由守卫的逻辑，并实现 isAuthenticated() 函数来进行用户身份验证。

react+ts

在 React 应用中使用 TypeScript 编写路由守卫需要使用 React Router。下面是一个示例，演示如何创建一个路由守卫来验证用户是否已登录：

首先，确保你已经安装了 React、React Router 和 TypeScript，如果没有，请使用以下命令安装它们：

npm install react
npm install react-router-dom
npm install typescript @types/react @types/react-dom @types/react-router-dom

接下来，你可以按照以下步骤来创建路由守卫：

  1. 创建路由配置：

    在你的项目中创建一个路由配置文件，通常命名为 router.tsx 或类似的名字。在这个文件中，你需要定义你的路由以及路由守卫。

    // router.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

interface PrivateRouteProps {
  component: React.FC;
  path: string;
  exact?: boolean;
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated() ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

// 在这里定义你的路由
const AppRouter: React.FC = () => (
  <Router>
    <Route path="/public" component={PublicPage} />
    <PrivateRoute path="/private" component={PrivatePage} />
  </Router>
);

export default AppRouter;

    在上面的代码中，我们定义了一个 PrivateRoute 组件，它用于验证用户是否已登录，如果未登录，则重定向到登录页面。

  2. 实现路由守卫逻辑：

    在 PrivateRoute 组件中，我们调用了 isAuthenticated() 函数来验证用户是否已登录。你需要实现这个函数以根据你的应用逻辑进行身份验证。

  3. 在主组件中使用路由配置：

    最后，在你的主组件中使用路由配置。

    import React from 'react';
import AppRouter from './router'; // 导入路由配置文件

const App: React.FC = () => {
  return (
    <div>
      {/* 其他应用程序内容 */}
      <AppRouter />
    </div>
  );
};

export default App;

    确保在你的主组件中嵌套 AppRouter，这样你的应用程序就可以使用定义的路由守卫了。

这样，你就创建了一个基本的路由守卫，用于在用户访问特定路由时验证用户身份。在实际项目中，你需要根据需求进一步扩展和优化路由守卫的逻辑，并实现 isAuthenticated() 函数来进行用户身份验证。注意，在 TypeScript 中，你可以使用接口和类型来定义组件的 props，以提供类型检查和自动完成。

Angular

在Angular中，你可以使用路由守卫来控制导航。Angular提供了以下几种类型的路由守卫：

  • CanActivate: 确定是否允许导航到一个路由。
  • CanActivateChild: 确定是否允许导航到子路由。
  • CanDeactivate: 确定是否允许从当前路由离开。
  • CanLoad: 确定是否允许延迟加载一个特性模块。

你可以在路由配置中使用这些守卫，如下所示：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canLoad: [AuthGuard] // 使用CanLoad守卫
  },
  // 其他路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在这个例子中，canLoad守卫用于控制是否允许延迟加载AdminModule。

不同前端框架和库的路由守卫实现方式有所不同，但它们的目标都是相似的，即在导航期间执行特定的操作。根据你使用的框架或库，你可以选择适合你项目需求的路由守卫类型，并在路由配置中使用它们。

avatar
文章
阅读
粉丝