当前位置：首页 > news >正文

前端路由守卫

news 2025/8/10 21:21:13

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

1. 路由守卫的类型

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

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

2. Vue Router 中的路由守卫

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

2.1 全局守卫

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

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 路由独享守卫

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

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

2.3 组件内守卫

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

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 使用高阶组件

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 使用自定义组件

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} />