当前位置：首页 > 技术文章 > 正文内容

React/Vue路由全攻略:鉴权、导航守卫与拦截，让你站在技术之巅

zonemu1周前 (07-26)技术文章3

本文介绍了在 React 和 Vue 中如何实现路由鉴权、导航守卫和路由拦截的方法。路由鉴权是指根据用户权限验证用户是否有权限访问特定的路由页面。导航守卫是在路由切换之前执行的钩子函数，用于控制路由的跳转。路由拦截是在路由处理过程中拦截某些特定路由的行为。本文将介绍 React 和 Vue 中的相关概念和实现方式，并通过示例代码展示如何应用这些概念来实现路由鉴权、导航守卫和路由拦截。

1 引言

React 和 Vue 是目前非常受欢迎的前端框架，它们以其高效的开发方式和灵活性而备受开发者喜爱。随着单页面应用程序（SPA）的流行，前端路由也成为了不可或缺的一部分。为了控制用户在应用中的访问权限，实现路由鉴权（Route Authorization），使用导航守卫（Navigation Guards）和路由拦截（Route Interception）成为了一种常见的需求。

在本篇论文中，我们将探讨 React 和 Vue 两种框架中实现路由鉴权、导航守卫和路由拦截的方法和技术，以及它们的优缺点和适用场景。我们将从以下几个方面展开讨论：

首先，我们将介绍路由鉴权的概念和意义，以及为什么我们需要在前端应用中实现该功能。随着前端应用日益复杂，对于用户的权限控制变得越来越重要。路由鉴权可以帮助我们在用户访问应用的不同页面时，对其权限进行验证，以确保只有具备相应权限的用户才能正确访问相应的页面。

然后，我们将研究 React 和 Vue 中的导航守卫机制。导航守卫是一种在用户导航到不同页面之前执行的函数或代码块。我们将重点介绍 React 中的 React Router 和 Vue 中的 Vue Router 提供的导航守卫功能，并讨论它们的用法和使用注意事项。

接着，我们将探讨路由拦截的概念和用途。路由拦截是一种在用户访问特定页面之前对其进行拦截和处理的机制。我们将讨论 React 和 Vue 中的路由拦截实现方式，并比较它们的异同点。我们还将讨论如何根据业务需求，选择合适的路由拦截方案。

最后，我们将总结和评估 React 和 Vue 两种框架中实现路、导航守卫和路由拦截的方法和技术。我们将比较它们的优缺点、性能和适用场景，并给出一些建议和最佳实践。

通过本篇论文的研究，我们将为开发者提供关于 React 和 Vue 中实现路由鉴权、导航守卫和路由拦截的详细指导和建议。这将有助于开发者在构建安全性强、权限控制完善的前端应用时，提供一种可行且有效的方法。

2 路由鉴权

2.1 React 中的路由鉴权

在 React 中实现路由鉴权可以通过 React Router 库来完成。以下是一个基本的路由鉴权实现示例：

  1. 首先，安装 React Router 库：
 npm install react-router-dom
  1. 在应用的顶级组件中设置路由规则，并为需要鉴权的路由添加鉴权逻辑。假设我们有两个需要鉴权的路由：/dashboard 和 /profile。
 import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
 
 function App() {
   // 假设这里有一个表示用户登录状态的变量
   const isAuthenticated = true;
 
   return (
     <Router>
       <Route path="/" exact>
         <Redirect to="/dashboard" />
       </Route>
       <Route path="/dashboard" component={Dashboard} />
       <Route
         path="/profile"
         render={() =>
           isAuthenticated ? <Profile /> : <Redirect to="/" />
         }
       />
     </Router>
   );
 }

在上面的示例中，我们使用<Route>组件来定义路由规则。对于需要鉴权的路由/profile，我们使用了render属性来条件性地渲染 <Profile /> 组件或者重定向到首页。

  1. 如果用户未登录，重定向到登录页面。在<Redirect> 组件中可以设置重定向的路径。
 <Route
   path="/profile"
   render={() =>
     isAuthenticated ? <Profile /> : <Redirect to="/login" />
   }
 />

在上面的示例中，如果用户未登录，则会重定向到/login页面。

这只是一个简单的示例，你可以根据实际需求来对路由鉴权进行更复杂的处理。通过使用 React Router 提供的组件和 API，你可以在 React 应用中实现灵活的路由鉴权机制。

2.2 Vue 中的路由鉴权

在 Vue 中，可以使用 Vue Router 来实现路由鉴权。Vue Router 提供了一些导航守卫（Navigation Guards）的选项，在路由切换之前进行验证。通过定义全局导航守卫和局部导航守卫，我们可以实现路由鉴权的功能。

以下是一个基本的路由鉴权实现示例：

  1. 首先，安装 Vue Router 库：
 npm install vue-router
  1. 在 Vue 应用中设置路由规则和导航守卫。假设我们有两个需要鉴权的路由：/dashboard 和 /profile。
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 Vue.use(VueRouter);
 
 const router = new VueRouter({
   routes: [
     {
       path: '/',
       redirect: '/dashboard',
     },
     {
       path: '/dashboard',
       component: Dashboard,
     },
     {
       path: '/profile',
       component: Profile,
       meta: { requiresAuth: true },
     },
   ],
 });
 
 // 添加导航守卫
 router.beforeEach((to, from, next) => {
   const isAuthenticated = true; // 假设这里有一个表示用户登录状态的变量
 
   // 如果路由需要鉴权
   if (to.meta.requiresAuth) {
     // 如果用户已登录，继续导航
     if (isAuthenticated) {
       next();
     } else {
       // 用户未登录，重定向到登录页面
       next('/');
     }
   } else {
     // 路由不需要鉴权，直接导航
     next();
   }
 });
 
 export default router;

在上面的示例中，我们首先引入 Vue Router 并初始化一个路由实例。在路由规则中，对于需要鉴权的路由/profile，我们使用了meta字段来指定需要鉴权。然后，我们通过beforeEach导航守卫来检查用户的登录状态以及路由的鉴权要求。如果用户未登录并且路由需要鉴权，则导航到登录页面，否则继续导航到目标页面。

  1. 在 Vue 组件中，可以直接使用路由来跳转到需要鉴权的路由。
 // 在某个 Vue 组件中使用
 methods: {
   goToProfile() {
     this.$router.push('/profile');
   },
 },

上述示例只是一个简单的路由鉴权实现，你可以根据实际需求来进行更复杂的处理。通过使用 Vue Router 提供的导航守卫功能，你可以在 Vue 应用中轻松实现路由鉴权。

3 导航守卫

3.1 React 中的导航守卫

在 React 中，可以使用高阶组件（Higher-Order Components）来实现导航守卫。通过定义一个包装组件，我们可以在路由切换之前或之后执行一些操作，例如验证用户登录状态、重定向页面等。

React Router 是 React 中最常用的路由库，它提供了一种称为<Route>组件的方式来定义和渲染路由。导航守卫可以在<Route>组件中使用以下方法来实现：

  1. 使用<Route>组件的render属性: 可以指定一个函数来渲染组件，并在函数中进行路由导航守卫逻辑的判断。例如：
 <Route path="/dashboard" render={() => {
   if (loggedIn) {
     return <Dashboard />;
   } else {
     return <Redirect to="/login" />;
   }
 }} />

在上面的例子中，如果用户已经登录，就会渲染<Dashboard>组件，否则会重定向到登录页面。

  1. 使用<Route>组件的component属性: 可以直接指定一个组件来渲染，并在组件内部通过 React 的生命周期钩子函数来执行导航守卫逻辑。例如：
 class PrivateRoute extends React.Component {
   componentDidMount() {
     if (!loggedIn) {
       window.location.href = '/login';
     }
   }
 
   render() {
     return <Route {...this.props} />;
   }
 }
 
 <PrivateRoute path="/dashboard" component={Dashboard} />

在上面的例子中，PrivateRoute组件会在挂载时检查用户是否已经登录，如果未登录，则会重定向到登录页面。

  1. 使用自定义的高阶组件（Higher-Order Component）: 可以创建一个高阶组件来封装路由组件，并在高阶组件内部执行导航守卫逻辑。
const requireAuth = (Component) => {
  return class extends React.Component {
    componentDidMount() {
      if (!loggedIn) {
        window.location.href = '/login';
      }
    }

    render() {
      return <Component {...this.props} />;
    }
  };
};

const ProtectedRoute = requireAuth(Dashboard);

<Route path="/dashboard" component={ProtectedRoute} />

在上面的例子中，requireAuth函数是一个高阶组件，它接受一个组件作为参数，并返回一个新的组件。新组件在查用户是否已经登录，如果未登录，则会重定向到登录页面。

这些是 React 中实现导航守卫的一些常见方法，具体的实现方式可以根据项目需求和个人偏好而定。

3.2 Vue 中的导航守卫

在 Vue 中，导航守卫是一种用于控制路由跳转的机制。它允许您在路由跳转前后执行一些特定的逻辑。

Vue 提供了三种导航守卫：

  1. 全局前置守卫（beforeEach）：在路由跳转之前执行，可以用来进行权限验证、页面加载前的操作等。
  2. 全局解析守卫（beforeResolve）：在路由组件被解析之后，渲染之前执行。
  3. 全局后置钩子（afterEach）：在路由跳转之后执行，可以用来进行日志记录、页面跳转之后的操作等。

另外，还可以在路由配置中使用路由独享的守卫，比如：

  1. 路由独享的前置守卫（beforeEnter）：只对某个具体的路由生效。
  2. 组件内的守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：在路由组件内部使用，可以访问组件实例。

导航守卫的使用方法如下：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      beforeEnter: (to, from, next) => {
        // 在路由独享的前置守卫中进行操作
        if (to.meta.requiresAuth && !auth.isLoggedIn()) {
          next('/login');
        } else {
          next();
        }
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  // 在全局前置守卫中进行操作
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

router.afterEach((to, from) => {
  // 在全局后置钩子中进行操作
});

以上代码示例中，beforeEnter是在路由配置中使用路由独享的前置守卫，beforeEach是全局前置守卫，afterEach是全局后置钩子。

需要注意的是，守卫中可以通过next函数来控制路由跳转的行为，调用next()表示放行，调用next('/path')表示跳转到指定的路径。

4 路由拦截

4.1 React 中的路由拦截

在 React 中，可以使用各种库来实现路由拦截（Route Interception）的功能。下面是使用 React Router 库进行路由拦截的示例。

首先，安装 React Router 库：

npm install react-router-dom

然后，使用 BrowserRouter 组件包裹整个应用，并配置需要拦截的路由：

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <PrivateRoute path="/dashboard" component={Dashboard} />
        <Route path="/login" component={Login} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

上面的示例中，PrivateRoute 是一个自定义的组件，用于拦截需要登录才能访问的路由。以下是 PrivateRoute 组件的实现：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = // 判断用户是否登录的逻辑

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

export default PrivateRoute;

在上面的示例中，PrivateRoute 组件接收一个 component 属性，表示需要拦截的组件。在 render 方法中，通过判断用户是否已经登录，如果已经登录，则渲染传入的组件，否则重定向到登录页。

以上就是在 React 中使用 React Router 库进行路由拦截的示例。根据具体的需求，可以根据实际情况进行定制和扩展。

4.2 Vue 中的路由拦截

在 Vue 中，可以使用路由拦截器来拦截导航到某个路由的操作。Vue 提供了全局前置守卫、全局解析守卫、全局后置钩子和路由独享守卫四种路由拦截的方式。

  1. 全局前置守卫（beforeEach）：在路由跳转前被调用，可以用来进行权限验证等操作。
  2. router.beforeEach((to, from, next) => {
    // 权限验证逻辑
    if (to.meta.auth && !isAuthenticated()) {
    next('/login');
    } else {
    next();
    }
    });
  3. 全局解析守卫（beforeResolve）：在路由跳转前被调用，用于异步路由的数据准备等操作。
  4. router.beforeResolve((to, from, next) => {
    // 异步数据准备逻辑
    fetchData().then(() => {
    next();
    });
    });
  5. 全局后置钩子（afterEach）：在路由跳转后被调用，可以用来进行埋点等操作。
  6. router.afterEach((to, from) => {
    // 埋点逻辑
    trackPageView(to.path);
    });
  7. 路由独享守卫：在定义路由时指定的 beforeEnter 函数，用来对某个路由进行独立的拦截。
  8. const router = new VueRouter({
    routes: [
    {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
    // 自定义拦截逻辑
    if (!isAuthenticated()) {
    next('/login');
    } else {
    next();
    }
    }
    }
    ]
    });

在上述拦截器中，next 函数用于控制路由跳转行为。调用 next()表示正常跳转，调用 next(false)表示中断跳转，调用 next('/login')表示跳转到指定路径。

5 实例分析

在本节中，我们将以一个在线商城网站为例来演示如何使用 React 和 Vue 框架实现路由鉴权、导航守卫和路由拦截的功能。我们将使用 React Router 和 Vue Router 这两个框架来完成这些功能，并提供一些示例代码来说明它们的用法和实现细节。

当涉及到在线商城网站时，路由鉴权、导航守卫和路由拦截非常重要，因为您可能需要确保只有授权用户才能访问某些页面，或者在用户访问某些页面之前执行某些逻辑。下面是使用 React Router 和 Vue Router 实现这些功能的示例代码：

使用 React Router 实现路由鉴权和导航守卫：

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

// 鉴权逻辑
const isAuthenticated = true;

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

// 路由组件
const Home = () => <h1>Home</h1>;
const Dashboard = () => <h1>Dashboard</h1>;
const Profile = () => <h1>Profile</h1>;
const LoginPage = () => <h1>Login Page</h1>;

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/login" component={LoginPage} />
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <PrivateRoute path="/profile" component={Profile} />
    </Router>
  );
}

export default App;

使用 Vue Router 实现路由鉴权和导航守卫：

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

// 鉴权逻辑
const isAuthenticated = true;

// Vue Router 安装
Vue.use(VueRouter);

// 导航守卫
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: LoginPage },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true },
    },
    {
      path: '/profile',
      component: Profile,
      meta: { requiresAuth: true },
    },
  ],
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (isAuthenticated) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

// Vue 实例
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

上述示例演示了如何利用 React Router 和 Vue Router 来实现路由鉴权和导航守卫。在这两个示例中，我们通过检查是否已经鉴权来决定是否导航到特定路由。如果没有鉴权或者未登录，则会重定向到登录页面。

这只是一个简单的示例，你可以根据实际需求对路由鉴权、导航守卫和路由拦截进行更复杂的处理。React Router 和 Vue Router 提供了更多的功能和选项，使你能够根据自己的需求来定制和控制路由行为。

6 结论

本文介绍了在 React 和 Vue 中实现路由鉴权、导航守卫和路由拦截的方法。通过 React Router 和 Vue Router 提供的功能，我们可以轻松地管理和控制前端应用的路由权限和跳转逻辑。无论是使用 React 还是 Vue，开发者都可以根据自己的需求和业务场景来选择合适的方法来实现路由管理。这些功能不仅可以提高前端应用的安全性和用户体验，还可以提高开发效率和代码的可维护性。

React 和 Vue 都可以实现路由鉴权，导航守卫，和路由拦截。下面是一个结论：

  1. React 中的路由鉴权可以使用 React Router 库来实现。React Router 提供了一个<Route>组件，可以在该组件上设置需要鉴权的路由。可以在<Route>组件上设置一个render属性，用来判断当前用户是否有权限访问该路由。例如：
<Route path="/protected" render={() => (
  isLoggedIn ? (<ProtectedComponent />) : (<Redirect to="/login" />)
)} />
  1. Vue 中的路由鉴权可以使用 Vue Router 库来实现。Vue Router 提供了一个beforeEach方法，可以在该方法中设置路由的鉴权逻辑。例如：
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login');
  } else {
    next();
  }
});
  1. 导航守卫是在路由跳转前和路由跳转后触发的一些钩子函数，可以用于处理特定的路由跳转情况。React Router 和 Vue Router 都提供了类似的导航守卫。例如，React Router 提供了onEnter和onLeave钩子函数，可以在这些钩子函数中处理路由跳转前和路由跳转后的逻辑。而 Vue Router 提供了beforeEach、beforeResolve、afterEach等钩子函数，可以在这些钩子函数中处理路由跳转前、跳转后的逻辑。
  2. 路由拦截是指在路由跳转时阻止或修改默认的跳转行为。在 React 和 Vue 中，可以通过在导航守卫中使用next方法来实现路由拦截。例如，可以在导航守卫中调用next(false)来阻止路由跳转，或者调用next('/someOtherPath')来修改默认的跳转路径。

React 和 Vue 都提供了相应的库和方法来实现路由鉴权、导航守卫和路由拦截。方式可以根据具体需求和项目框架的不同而有所差异。

相关文章

Linux之父:Linux内核5.8是“我们有史以来最大的发行版之一”

Linux内核负责人Linus Torvalds对Linux内核版本5.8的第一个候选发布版本（rc1）看得出来还是挺满意的，该版本包含80万行新代码行和超过14,000个更改的文件，占内核文件检修的...

细数5款国外热门Linux发行版（linux发行版排名网站）

Linux系统已经与我们的生活息息相关，当你用Android手机浏览这篇文章时，你就已经在使用Linux系统。当然作为编程开发最热门的系统，他还有很多专注于开发使用的版本。Fedora热门入门推荐，一...

Vue3开发极简入门(16):祖孙组件间通信之provide&amp;inject

前文说了Vue的组件间关系，有父子、爷孙、其他关系。例如之前的Father、Son是父子关系，App与Son就是爷孙关系。而props的Son，与emits的Son，就是其他关系。前文的props是父...

Vue3，父组件子组件传值，provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时，通常使用的是props和emit，父向子传递使用props，子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title...

快速上手React（快速上手的高级表达）

web前端三大主流框架1、Angular大家眼里比较牛的框架，甚至有人说三大框架中只有它能称得上一个完整的框架，因为它包含的东西比较完善，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等...

学习ES6- 入门Vue(大量源代码及笔记，带你起飞)

ES6学习网站： https://es6.ruanyifeng.com/箭头函数普通函数//普通函数 this 指向调用时所在的对象(可变) let fn = function fn(a, b) {...

滇ICP备2024046894号-37