前端路由守卫

路由守卫是前端路由管理中的一个重要概念，主要用于控制用户访问特定路由的权限。通过路由守卫，可以在用户进入某个路由之前进行验证，比如检查用户是否已登录、是否有权限访问该路由等。路由守卫通常用于单页面应用（SPA）中，尤其是在使用 Vue Router、React Router 等路由库时。

1. 路由守卫的类型

路由守卫通常分为以下几种类型：

全局守卫：在路由配置中定义，适用于所有路由。
路由独享守卫：在特定路由配置中定义，仅适用于该路由。
组件内守卫：在组件内部定义，适用于该组件的路由。

2. Vue Router 中的路由守卫

在 Vue.js 中，使用 Vue Router 进行路由管理时，可以通过以下方式实现路由守卫。

2.1 全局守卫

全局守卫可以在创建路由实例时定义，适用于所有路由。

javascript 复制代码

import Vue from 'vue';
import Router from 'vue-router';
import store from './store'; // 假设使用 Vuex 进行状态管理

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } },
    // 其他路由
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查目标路由是否需要认证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查用户是否已登录
    if (!store.state.isAuthenticated) {
      next({ path: '/login' }); // 重定向到登录页
    } else {
      next(); // 继续导航
    }
  } else {
    next(); // 不需要认证，继续导航
  }
});

export default router;

2.2 路由独享守卫

在特定路由中定义守卫，仅适用于该路由。

javascript 复制代码

const router = new Router({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (store.state.isAuthenticated) {
          next(); // 继续导航
        } else {
          next({ path: '/login' }); // 重定向到登录页
        }
      }
    }
  ]
});

2.3 组件内守卫

在组件内部定义守卫，适用于该组件的路由。

javascript 复制代码

export default {
  name: 'Dashboard',
  beforeRouteEnter(to, from, next) {
    if (store.state.isAuthenticated) {
      next(); // 继续导航
    } else {
      next({ path: '/login' }); // 重定向到登录页
    }
  }
};

3. React Router 中的路由守卫

在 React 中，使用 React Router 进行路由管理时，可以通过高阶组件或自定义组件实现路由守卫。

3.1 使用高阶组件

javascript 复制代码

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

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

// 使用 PrivateRoute
<PrivateRoute path="/dashboard" component={Dashboard} isAuthenticated={isAuthenticated} />

3.2 使用自定义组件

javascript 复制代码

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

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

// 使用 AuthGuard
<AuthGuard path="/dashboard" component={Dashboard} isAuthenticated={isAuthenticated} />

4. 总结

路由守卫是前端路由管理中不可或缺的一部分，能够有效控制用户的访问权限。通过全局守卫、路由独享守卫和组件内守卫，可以灵活地实现不同的访问控制策略。在实现路由守卫时，通常需要结合状态管理（如 Vuex 或 Redux）来判断用户的认证状态。